Date Range Picker
Introduction
A DateRangePicker
shows two sequential month calendars and lets the user select a single range of
days.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Included Components
DateRangePicker
:DateRangePicker
uses theDateRange
type across its API. This is an alias for the tuple type[Date, Date]
.Shortcuts
:
The menu on the left of the calendars provides "shortcuts" that allow users to
quickly select common date ranges. The items in this menu are controlled through
the shortcuts
prop: true
to show presets (default), false
to hide, or an
array of IDateRangeShortcut
objects to define custom shortcuts.
The preset shortcuts can be seen in the example above. They are as follows:
- Today (only appears if
allowSingleDayRange={true}
) - Yesterday (only appears if
allowSingleDayRange={true}
) - Past week
- Past month
- Past 3 months
- Past 6 months
- Past year
- Past 2 years
Examples
Live Playgrounds coming soon!
Usage
DateRangePicker
API Reference
DateRangePicker
Prop Name | Required? | Type | Description |
---|---|---|---|
allowSingleDayRange | false | boolean | Whether the start and end dates of the range can be the same day. If `true`, clicking a selected date will create a one-day range. If `false`, clicking a selected date will clear the selection. |
boundaryToModify | false | Boundary | The date-range boundary that the next click should modify. This will be honored unless the next click would overlap the other boundary date. In that case, the two boundary dates will be auto-swapped to keep them in chronological order. If `undefined`, the picker will revert to its default selection behavior. |
contiguousCalendarMonths | false | boolean | Whether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months. |
dayPickerProps | false | DayPickerProps | Props to pass to ReactDayPicker. See API documentation [here](http://react-day-picker.js.org/api/DayPicker). The following props are managed by the component and cannot be configured: `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`). |
defaultValue | false | DateRange | Initial `DateRange` the calendar will display as selected. This should not be set if `value` is set. |
initialMonth | false | Date | The initial month the calendar displays. |
locale | false | string | The locale name, which is passed to the functions in `localeUtils` (and `formatDate` and `parseDate` if supported). |
localeUtils | false | LocaleUtils | Collection of functions that provide internationalization support. |
maxDate | false | Date | The latest date the user can select. |
minDate | false | Date | The earliest date the user can select. |
modifiers | false | IDatePickerModifiers | Collection of functions that determine which modifier classes get applied to which days. Each function should accept a `Date` and return a boolean. See the [**react-day-picker** documentation](http://react-day-picker.js.org/api/ModifiersUtils) to learn more. |
onChange | false | (selectedDates: DateRange) => void | Called when the user selects a day. If no days are selected, it will pass `[null, null]`. If a start date is selected but not an end date, it will pass `[selectedDate, null]`. If both a start and end date are selected, it will pass `[startDate, endDate]`. |
onHoverChange | false | (hoveredDates: DateRange, hoveredDay: Date, hoveredBoundary: Boundary) => void | Called when the user changes the hovered date range, either from mouseenter or mouseleave. When triggered from mouseenter, it will pass the date range that would result from next click. When triggered from mouseleave, it will pass `undefined`. |
reverseMonthAndYearMenus | false | boolean | If `true`, the month menu will appear to the left of the year menu. Otherwise, the month menu will apear to the right of the year menu. |
shortcuts | false | boolean | IDateRangeShortcut[] | Whether shortcuts to quickly select a range of dates are displayed or not. If `true`, preset shortcuts will be displayed. If `false`, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed. |
singleMonthOnly | false | boolean | Whether to show only a single month calendar. |
timePickerProps | false | ITimePickerProps | Further configure the `TimePicker` that appears beneath the calendar. `onChange` and `value` are ignored in favor of the corresponding top-level props on this component. Passing any defined value to this prop (even `{}`) will cause the `TimePicker` to appear. |
timePrecision | false | TimePrecision | The precision of time selection that accompanies the calendar. Passing a `TimePrecision` value (or providing `timePickerProps`) shows a `TimePicker` below the calendar. Time is preserved across date changes. This is shorthand for `timePickerProps.precision` and is a quick way to enable time selection. |
value | false | DateRange | The currently selected `DateRange`. If this prop is provided, the component acts in a controlled manner. |
DateRangeShortcut
Prop Name | Required? | Type | Description |
---|---|---|---|
dateRange | true | DateRange | Date range represented by this shortcut. Note that time components of a shortcut are ignored by default; set `includeTime: true` to respect them. |
includeTime | false | boolean | Set this prop to `true` to allow this shortcut to change the selected times as well as the dates. By default, time components of a shortcut are ignored; clicking a shortcut takes the date components of the `dateRange` and combines them with the currently selected time. |
label | true | string | Shortcut label that appears in the list. |
Related Reading
Blueprint Reference