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.

Examples

Usage

DateRangeInput

import React from "react";
import { DateRangeInput } from "@commure/components-foundation";
function MyDateRangeInput() {
return <DateRangeInput
formatDate={date => date.toLocaleString()}
onChange={this.handleRangeChange}
parseDate={str => new Date(str)}
value={[this.state.startDate, this.state.endDate]}
/>;
}
export default MyDateRangeInput;

API Reference

DateRangeInput

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.
closeOnSelectionfalsebooleanWhether the calendar popover should close when a date range is fully selected.
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](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`).
defaultValuefalseDateRangeThe default date range to be used in the component when uncontrolled. This will be ignored if `value` is set.
disabledfalsebooleanWhether the text inputs are non-interactive.
endInputPropsfalseHTMLInputProps & IInputGroupPropsProps 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.
initialMonthfalseDateThe initial month the calendar displays.
invalidDateMessagefalsestringThe error message to display when the date selected is invalid.
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](http://react-day-picker.js.org/api/ModifiersUtils) to learn more.
onChangefalse(selectedRange: 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]`.
onErrorfalse(errorRange: DateRange) => voidCalled 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).
outOfRangeMessagefalsestringThe error message to display when the date selected is out of range.
overlappingDatesMessagefalsestringThe error message to display when the selected dates overlap. This can only happen when typing dates in the input field.
placeholderfalsestringPlaceholder text to display in empty input fields. Recommended practice is to indicate the expected date format.
popoverPropsfalsePartial<IPopoverProps>The props to pass to the popover. `autoFocus`, `content`, and `enforceFocus` will be ignored to avoid compromising usability.
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.
selectAllOnFocusfalsebooleanWhether the entire text field should be selected on focus.
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.
startInputPropsfalseHTMLInputProps & IInputGroupPropsProps 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.
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 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