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