Date Picker


A DatePicker shows a monthly calendar and allows the user to choose a single date.

DatePicker is built on top of the react-day-picker library.




1import React from "react";
2import { DatePicker } from "@commure/components-foundation";
4function MyDatePicker() {
5 return <DatePicker />;
8export default MyDatePicker;

API Reference


Prop NameRequired?TypeDescription
canClearSelectionfalsebooleanAllows the user to clear the selection by clicking the currently selected day.
clearButtonTextfalsestringText for the reset button in the action bar.
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`).
defaultValuefalseDateInitial day the calendar will display as selected. This should not be set if `value` is set.
initialMonthfalseDateThe initial month the calendar displays.
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 day. If being used in an uncontrolled manner, `selectedDate` will be `null` if the user clicks the currently selected day. If being used in a controlled manner, `selectedDate` will contain the day clicked no matter what. `isUserChange` is true if the user selected a day, and false if the date was automatically changed by the user navigating to a new month or year rather than explicitly clicking on a date in the calendar.
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.
showActionsBarfalsebooleanWhether the bottom bar displaying "Today" and "Clear" buttons should be shown.
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 action bar.
valuefalseDateThe currently selected day. If this prop is provided, the component acts in a controlled manner.

Related Reading

Blueprint Reference
TimePicker Component