Date Range Input

Introduction

The DateRangeInput component is a control group composed of two input groups. It shows a DateRangePicker in a Popover on focus.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Live Playgrounds coming soon!

Usage

DateRangeInput

1import React from "react";
2import { DateRangeInput } from "@commure/components-foundation";
3
4function MyDateRangeInput() {
5  return (
6    <DateRangeInput
7      formatDate={date => date.toLocaleString()}
8      onChange={this.handleRangeChange}
9      parseDate={str => new Date(str)}
10      value={[this.state.startDate, this.state.endDate]}
11    />
12  );
13}
14
15export default MyDateRangeInput;

API Reference

DateRangeInput

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.
closeOnSelection	false	boolean	Whether the calendar popover should close when a date range is fully selected.
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	The default date range to be used in the component when uncontrolled. This will be ignored if `value` is set.
disabled	false	boolean	Whether the text inputs are non-interactive.
endInputProps	false	HTMLInputProps & IInputGroupProps	Props to pass to the end-date [input group](#core/components/text-inputs.input-group). `disabled` and `value` will be ignored in favor of the top-level props on this component. `ref` is not supported; use `inputRef` instead.
initialMonth	false	Date	The initial month the calendar displays.
invalidDateMessage	false	string	The error message to display when the date selected is invalid.
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	(selectedRange: 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]`.
onError	false	(errorRange: DateRange) => void	Called when the user finishes typing in a new date and the date causes an error state. If the date is invalid, `new Date(undefined)` will be returned for the corresponding boundary of the date range. If the date is out of range, the out-of-range date will be returned for the corresponding boundary of the date range (`onChange` is not called in this case).
outOfRangeMessage	false	string	The error message to display when the date selected is out of range.
overlappingDatesMessage	false	string	The error message to display when the selected dates overlap. This can only happen when typing dates in the input field.
placeholder	false	string	Placeholder text to display in empty input fields. Recommended practice is to indicate the expected date format.
popoverProps	false	Partial<IPopoverProps>	The props to pass to the popover. `autoFocus`, `content`, and `enforceFocus` will be ignored to avoid compromising usability.
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.
selectAllOnFocus	false	boolean	Whether the entire text field should be selected on focus.
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.
startInputProps	false	HTMLInputProps & IInputGroupProps	Props to pass to the start-date [input group](#core/components/text-inputs.input-group). `disabled` and `value` will be ignored in favor of the top-level props on this component. `ref` is not supported; use `inputRef` instead.
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 date range. If the prop is strictly `undefined`, the component acts in an uncontrolled manner. If this prop is anything else, the component acts in a controlled manner. To display an empty value in the input fields in a controlled manner, pass `[null, null]`. To display an invalid date error in either input field, pass `new Date(undefined)` for the appropriate date in the value prop.

Related Reading

Blueprint Reference