DateRangePicker

DateRangePicker is used to quickly enter or pick a date and time range.

Import

import { DateRangePicker } from 'rsuite';

Examples

Basic

Customize the date format

Size

Appearance

Block

Placeholder

Select Whole Week, Whole Month

One tap

Show Week Numbers

Show One Calendar

Disabled and Readonly

shouldDisableDate is a function type property that is called when the calendar is rendered and the date is selected, and the options that need to be disabled can be customized according to the business. The syntax is as follows:

shouldDisableDate(
 date: Date,              // Date used to determine if disabling is required.
 selectDate: Array<Date>, // Date selected.
 selectedDone: boolean,     // Whether to choose to finish now. If `false`, only the start date is selected, waiting for the selection end date.
 target: 'CALENDAR' | 'TOOLBAR_BUTTON_OK' | 'TOOLBAR_SHORTCUT' | 'INPUT',   // Call the target of the `shouldDisableDate` function
) => boolean

To make it easier to set the date you want to disable, DateRangePicker provides some methods for easy calling, examples:

import { DateRangePicker } from 'rsuite';

const { combine, allowedMaxDays, beforeToday } = DateRangePicker;

<DateRangePicker shouldDisableDate={combine(allowedMaxDays(7), beforeToday())} />;
Method Type Description
after (date?: string | Date) => boolean Disable dates after the specified date
afterToday () => boolean Disable dates after today
allowedDays (days: number) => boolean Only allowed days are specified, other dates are disabled
allowedMaxDays (days: number) => boolean Allow the maximum number of days specified, other dates are disabled
allowedRange (startDate: string | Date, endDate: string | Date) => boolean Allow specified date range, other dates are disabled
before (date?: string | Date) => boolean Disable dates before the specified date
beforeToday () => boolean Disable dates before today
combine (...args) => boolean Used to combine multiple conditions

Disable input

DateRangePicker allows date and time input via keyboard by default, if you wish to disable it, you can disable editing by setting editable={false}.

Loading state

With a label

Predefined Date Ranges

Controlled vs. uncontrolled value

Custom Calendar Icon

Custom render value

Hide Header

Accessibility

ARIA properties

Has all ARIA properties of the DateRangeInput component by default.

  • The aria-invalid="true" attribute is added to the <input> element when the value is invalid.
  • When label is set, the aria-labelledby attribute is added to the <input> element and the dialog element and is set to the value of the id attribute of label.
  • Has the aria-haspopup="dialog" attribute to indicate that the component has an interactive dialog.

Keyboard interactions

Has keyboard interaction for the DateRangeInput component by default.

Props

<DateRangePicker>

Property Type(default) Description
appearance 'default' | 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
caretAs ElementType Custom component for the caret icon
character string (' ~ ') The character that separates two dates
cleanable boolean (true) Whether the selected value can be cleared
container HTMLElement | (() => HTMLElement) Sets the rendering container
defaultCalendarValue [Date, Date] Default calendar panel date
defaultOpen boolean Default value of open property
defaultValue [Date, Date] Default value
disabled boolean Whether disabled the component
disabledDate (date:Date) => boolean ⚠️[Deprecated] Use shouldDisableDate instead
editable boolean (true) Rendered as an input, the date can be entered via the keyboard
format string ('yyyy-MM-dd') Format of the date when rendered in the input
hoverRange unions: 'week', 'month' or (date: Date) => [Date, Date] The date range that will be selected when you click on the date
isoWeek boolean ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
label ReactNode A label displayed at the beginning of toggle button
limitEndYear number (1000) Sets the upper limit of the available year relative to the current selection date
limitStartYear number Sets the lower limit of the available year relative to the current selection date
loading boolean (false) Whether to display a loading state indicator
locale CalendarLocaleType Locale text
onChange (value: [Date, Date]) => void Callback fired when value changed
onClean (event) => void Callback fired when value clean
onClose () => void Callback fired when close component
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
oneTap boolean Whether to click once on selected date range,Can be used with hoverRange
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onOk (value: [Date, Date]) => void Callback fired when clicked OK button
onOpen () => void Callback fired when open component
onSelect (date:Date) => void Callback fired when date is selected
onShortcutClick (shortcut: Range, event) => void Callback fired when shortcut clicked
open boolean whether open the component
placeholder string Setting placeholders
placement Placement ('bottomStart') The placement of component
preventOverflow boolean Prevent floating element overflow
ranges Range[] (Ranges) Set predefined date ranges the user can select from. Default: Today,YesterdayLast 7 days
renderTitle (date: Date) => ReactNode Custom render for month's title
renderValue (date: [Date, Date], format: string) => string Custom render value
shouldDisableDate DisabledDateFunction Disabled date
showHeader boolean (true) Whether to display the formatted date range at the header of the calendar
showMeridian boolean Display hours in 12 format
showOneCalendar boolen Whether to show only one calendar
showWeekNumbers boolean Whether to show week numbers
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
value [Date, Date] Value (Controlled)

ts:Placement

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

ts:Range

interface Range {
  label: ReactNode;
  value: Date | ((date: Date) => Date);
  closeOverlay?: boolean;

  // Sets the position where the predefined range is displayed, the default is bottom.
  placement?: 'bottom' | 'left';
}

ts:ValueType

type ValueType = [Date, Date];

ts:DisabledDateFunction

type DisabledDateFunction = (
  /**
   * Date used to determine if disabling is required.
   */
  date: Date,

  /**
   * Date selected.
   */
  selectDate?: ValueType,

  /**
   * Whether to choose to finish now.
   * If `false`, only the start date is selected, waiting for the selection end date.
   */
  selectedDone?: boolean,

  /**
   * Call the target of the `shouldDisableDate` function.
   */
  target?: DATERANGE_DISABLED_TARGET
) => boolean;

ts:Ranges

import { startOfDay, endOfDay, addDays, subDays } from 'date-fns';

const Ranges = [
  {
    label: 'today',
    value: [startOfDay(new Date()), endOfDay(new Date())]
  },
  {
    label: 'yesterday',
    value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))]
  },
  {
    label: 'last7Days',
    value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())]
  }
];
Vercel banner