DateRangePicker #

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

Import #

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())} />;

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,Yesterday，Last 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)
weekStart	0 | 1 | 2 | 3 | 4 | 5 | 6 (0)	The index of the first day of the week (0 - Sunday). If isoWeek is true, the value of weekStart is ignored

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())]
  }
];