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