Date Input


The DateInput component is an input group that shows a DatePicker in a Popover on focus. Use it in forms where the user must enter a date.




1import React from "react";
2import { DateInput } from "@commure/components-foundation";
4function MyDateInput() {
5 return (
6 <DateInput
7 formatDate={date => date.toLocaleString()}
8 onChange={this.handleDateChange}
9 parseDate={str => new Date(str)}
10 placeholder={"M/D/YYYY"}
11 value={}
12 />
13 );
16export default MyDateInput;

API Reference


Prop NameRequired?TypeDescription
canClearSelectionfalsebooleanAllows the user to clear the selection by clicking the currently selected day. Passed to `DatePicker` component.
clearButtonTextfalsestringText for the reset button in the date picker action bar. Passed to `DatePicker` component.
closeOnSelectionfalsebooleanWhether the calendar popover should close when a date is selected.
dayPickerPropsfalseDayPickerPropsProps to pass to ReactDayPicker. See API documentation [here]( The following props are managed by the component and cannot be configured: `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
defaultValuefalseDateThe default date to be used in the component when uncontrolled.
disabledfalsebooleanWhether the date input is non-interactive.
initialMonthfalseDateThe initial month the calendar displays.
inputPropsfalseHTMLInputProps & IInputGroupPropsProps to pass to the [input group](#core/components/text-inputs.input-group). `disabled` and `value` will be ignored in favor of the top-level props on this component. `type` is fixed to "text" and `ref` is not supported; use `inputRef` instead.
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]( to learn more.
onChangefalse(selectedDate: Date, isUserChange: boolean) => voidCalled when the user selects a new valid date through the `DatePicker` or by typing in the input. The second argument is true if the user clicked on a date in the calendar, changed the input value, or cleared the selection; it will be false if the date was changed by choosing a new month or year.
onErrorfalse(errorDate: Date) => 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. If the date is out of range, the out of range date will be returned (`onChange` is not called in this case).
outOfRangeMessagefalsestringThe error message to display when the date selected is out of range.
placeholderfalsestringPlaceholder text to display in empty input fields. Recommended practice is to indicate the expected date format.
popoverPropsfalsePartial<IPopoverProps> & objectProps to pass to the `Popover`. Note that `content`, `autoFocus`, and `enforceFocus` cannot be changed.
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.
rightElementfalseElementElement to render on right side of input.
showActionsBarfalsebooleanWhether the bottom bar displaying "Today" and "Clear" buttons should be shown below the 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.
todayButtonTextfalsestringText for the today button in the date picker action bar. Passed to `DatePicker` component.
valuefalseDate | nullThe currently selected day. If this prop is provided, the component acts in a controlled manner. To display no date in the input field, pass `null` to the value prop. To display an invalid date error in the input field, pass `new Date(undefined)` to the value prop.

Related Reading

Blueprint Reference