Date Picker

Introduction

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.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Live Playgrounds coming soon!

Usage

DatePicker

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

API Reference

DatePicker

Prop Name	Required?	Type	Description
canClearSelection	false	boolean	Allows the user to clear the selection by clicking the currently selected day.
clearButtonText	false	string	Text for the reset button in the action bar.
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`, `fromMonth` (use `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
defaultValue	false	Date	Initial day the calendar will display as selected. This should not be set if `value` is set.
initialMonth	false	Date	The initial month the calendar displays.
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	(selectedDate: Date, isUserChange: boolean) => void	Called 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.
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.
showActionsBar	false	boolean	Whether the bottom bar displaying "Today" and "Clear" buttons should be shown.
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.
todayButtonText	false	string	Text for the today button in the action bar.
value	false	Date	The currently selected day. If this prop is provided, the component acts in a controlled manner.

Related Reading

Blueprint Reference

TimePicker Component