DateRangePicker

Used to quickly select a date range

If <DateRangePicker> does not satisfy the business scenario in which you select the time range, you can use two DatePicker combinations.

Import

import { DateRangePicker } from 'rsuite';

// or
import DateRangePicker from 'rsuite/DateRangePicker';

Examples

Default

Date Time or Time

Appearance

Size

Block

Placeholder

Select Whole Week, Whole Month

One tap

Show Week Numbers

Show One Calendar

Disabled and Readonly

disabledDate 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:

disabledDate(
 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'   // Call the target of the `disabledDate` 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;

ReactDOM.render(<DateRangePicker disabledDate={combine(allowedMaxDays(7), beforeToday())} />);

allowedMaxDays

Allow the maximum number of days specified, other dates are disabled

allowedMaxDays(days: number) => boolean

allowedDays

Only allowed days are specified, other dates are disabled

allowedDays(days: number) => boolean

allowedRange

Allow specified date range, other dates are disabled

allowedRange( startDate: string | Date, endDate: string | Date) => boolean

after

Disable dates after the specified date

after(date?: string | Date) => boolean

afterToday

Disable dates after today

afterToday() => boolean

before

Disable dates before the specified date

before(date?: string | Date) => boolean

beforeToday

Disable dates before today

beforeToday() => boolean

combine

Used to combine multiple conditions

combine(...) => boolean

Custom Shortcut Options

Controlled

Accessibility

Learn more in Accessibility.

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	ValueType	Default calendar panel date
defaultOpen	boolean	Default value of open property
defaultValue	ValueType	Default value
disabled	boolean	Whether disabled the component
disabledDate	DisabledDateFunction	Disabled data
format	string `('yyyy-MM-dd')`	Format date refer to date-fns format
hoverRange	unions: 'week', 'month' or (date: Date) => ValueType	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
limitEndYear	number `(1000)`	Sets the lower limit of the available year relative to the current selection date
locale	CalendarLocaleType	Locale text
onChange	(value: ValueType) => 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
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: ValueType) => void	Callback fired when clicked OK button
onOpen	() => void	Callback fired when open component
onSelect	(date:Date) => void	Callback fired when date is selected
oneTap	boolean	Whether to click once on selected date range，Can be used with hoverRange
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)	Whortcut config，defeult: `Today`,`Yesterday`，`Last 7 days`
renderValue	(value: ValueType, format: string) => ReactNode	Custom render selected date range
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
toggleAs	ElementType `('a')`	You can use a custom element for this component
value	ValueType	Value (Controlled)

`ts:Placement`

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

`ts:Range`

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

`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 `disabledDate` function
  target?: 'CALENDAR' | 'TOOLBAR_BUTTON_OK' | 'TOOLBAR_SHORTCUT'
) => 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())]
  }
];