Date Range Picker


A DateRangePicker shows two sequential month calendars and lets the user select a single range of days.

Included Components

  1. DateRangePicker: DateRangePicker uses the DateRange type across its API. This is an alias for the tuple type [Date, Date].

  2. 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




1import React from "react";
2import { DateRangePicker } from "@commure/components-foundation";
4function MyDateRangePicker() {
5 return <DateRangePicker />;
8export default MyDateRangePicker;

API Reference


Prop NameRequired?TypeDescription
allowSingleDayRangefalsebooleanWhether 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.
boundaryToModifyfalseBoundaryThe 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.
contiguousCalendarMonthsfalsebooleanWhether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months.
dayPickerPropsfalseDayPickerPropsProps to pass to ReactDayPicker. See API documentation [here]( The following props are managed by the component and cannot be configured: `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
defaultValuefalseDateRangeInitial `DateRange` the calendar will display as selected. This should not be set if `value` is set.
initialMonthfalseDateThe initial month the calendar displays.
localefalsestringThe locale name, which is passed to the functions in `localeUtils` (and `formatDate` and `parseDate` if supported).
localeUtilsfalseLocaleUtilsCollection of functions that provide internationalization support.
maxDatefalseDateThe latest date the user can select.
minDatefalseDateThe earliest date the user can select.
modifiersfalseIDatePickerModifiersCollection 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]( to learn more.
onChangefalse(selectedDates: DateRange) => voidCalled 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]`.
onHoverChangefalse(hoveredDates: DateRange, hoveredDay: Date, hoveredBoundary: Boundary) => voidCalled 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`.
reverseMonthAndYearMenusfalsebooleanIf `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.
shortcutsfalseboolean | 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.
singleMonthOnlyfalsebooleanWhether to show only a single month calendar.
timePickerPropsfalseITimePickerPropsFurther 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.
timePrecisionfalseTimePrecisionThe 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.
valuefalseDateRangeThe currently selected `DateRange`. If this prop is provided, the component acts in a controlled manner.


Prop NameRequired?TypeDescription
dateRangetrueDateRangeDate range represented by this shortcut. Note that time components of a shortcut are ignored by default; set `includeTime: true` to respect them.
includeTimefalsebooleanSet 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.
labeltruestringShortcut label that appears in the list.

Related Reading

Blueprint Reference