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 the DateRange 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

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

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