DateRangePicker

Used to quickly select a date range

<DateRangePicker>

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

Usage

import { DateRangePicker } from 'rsuite';

Examples

Default

Appearance

Size

Block

Placeholder

Select Whole Week, Whole Month

One tap

Show Week Numbers

Show One Calendar

Disabled

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

Set The Local Language

Props

`<DateRangePicker>`

Property	Type`(default)`	Description
appearance	enum: 'default', 'subtle' `('default')`	Set picker appearence
block	boolean	Blocking an entire row
cleanable	boolean `(true)`	Whether the selected value can be cleared
container	HTMLElement or (() => HTMLElement)	Sets the rendering container
defaultCalendarValue	Array<Date>	Default calendar panel date
defaultOpen	boolean	Default value of open property
defaultValue	Array<Date>	Default value
disabled	boolean	Whether disabled the component
disabledDate	( date: Date, selectDate: Array<Date>, selectedDone: boolean, target: 'CALENDAR', 'TOOLBAR_BUTTON_OK', 'TOOLBAR_SHORTCUT' ) => boolean	Disabled data
hoverRange	unions: 'week', 'month' or (date: Date) => Array<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
limitEndYear	number `(1000)`	Sets the lower limit of the available year relative to the current selection date
onChange	(`value`:Array<Date>) => void	Callback fired when value changed
onClean	(event:SyntheticEvent) => 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`:Array<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
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	enum: Placement `('bottomStart')`	The placement of component
preventOverflow	boolean	Prevent floating element overflow
ranges	Array<Range> `(Ranges)`	Whortcut config，defeult: `Today`,`Yesterday`，`Last 7 days`
renderValue	(value: ValueType, format: string) => React.ReactNode	Custom render selected date range
showOneCalendar	boolen	Whether to show only one calendar
showWeekNumbers	boolean	Whether to show week numbers
size	enum: 'lg', 'md', 'sm', 'xs' `('md')`	A picker can have different sizes
toggleComponentClass	React.ElementType `('a')`	You can use a custom element for this component
value	Array<Date>	Value (Controlled)

Default

Locale

const Locale = {
  sunday: 'Su',
  monday: 'Mo',
  tuesday: 'Tu',
  wednesday: 'We',
  thursday: 'Th',
  friday: 'Fr',
  saturday: 'Sa',
  ok: 'OK',
  today: 'Today',
  yesterday: 'Yesterday',
  last7Days: 'Last 7 Days',
  hours: 'Hours',
  minutes: 'Minutes',
  seconds: 'Seconds'
};

Ranges

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