Datepicker
Date format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
A simple and reusable component to work with or select a date or a range of dates.
Accessibility
- Supports keyboard hotkeys:
tab
- to switch between inputs, arrows, month\year select and day grid.escape
to close datepicker dropdown. - When month and year selects focused,
up
anddown
causes dropdown to open and move to value,enter
andspace
to choose selected year or month. - When day grid is focused,
left
,down
right
andup
to move through the grid days.Enter
to pick date. - When left or right arrow is focused,
enter
causes the same as click on this arrow. - Accessibility best practices for this component (
aria-valuenow
,aria-valuetext
,aria-valuemin
,aria-valuemax
,role=datepicker
).
Examples
Datepicker in a popover
Date format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Date format is yyyy/MM/dd – yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
The formatString
property supports all the patterns supported by date-fns' format method.
For example, if someone wants to change it to Australian format, one has to simply pass the formatString={'d/MM/YYYY'}
as the props.
Please note, that some of the options require you to pass in the locale
object too, just as shown in this example.
When using a custom mask formatString
prop should be also set to match the mask format.
Some date formats will operate better without a restrictive input mask. You can disable that feature by applying null
to the mask prop.
Composed range pickers
Date format is yyyy/MM/dd – yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Date format is yyyy/MM/dd – yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Datepicker states
Disabled stateDate format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Date format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Date format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
Datepicker with timezone selection
This example works for most use-cases, however certain edge-cases are not handled here. If this data is mission critical for your systems, consider using Moment.tsx, and pass the date object from Moment.tsx to the datepicker.
Date format is yyyy/MM/dd. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.
In this example we use a nested override to customize the ListItem
within the month/year dropdown (MonthYearSelectStatefulMenu
).
Here we use the most flexible and complex override by component replacement where we wrap a components onChange handler to subscribe to the datepicker event when a quick selection is picked.
Datepicker exports
You can import this module like so:
import {Calendar} from 'baseui/datepicker'
It exports the following components or utility functions:
- Calendar
- DENSITY
- DatePicker
- Datepicker
- Datepicker_DO_NOT_USE
- ORIENTATION
- RANGED_CALENDAR_BEHAVIOR
- STATE_CHANGE_TYPE
- StatefulCalendar
- StatefulContainer
- StatefulDatePicker
- StatefulDatepicker
- StyledCalendarContainer
- StyledCalendarHeader
- StyledDay
- StyledDayLabel
- StyledEndDate
- StyledInputContainer
- StyledInputLabel
- StyledInputWrapper
- StyledMonth
- StyledMonthContainer
- StyledMonthHeader
- StyledMonthYearSelectButton
- StyledMonthYearSelectIconContainer
- StyledNextButton
- StyledPrevButton
- StyledRoot
- StyledSelectorContainer
- StyledStartDate
- StyledWeek
- StyledWeekdayHeader
- TimePicker
- TimezonePicker
- formatDate