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.

Selected date is 2025/01/21. Select the second date.

API

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 and down causes dropdown to open and move to value, enter and space to choose selected year or month.
  • When day grid is focused, left, down right and up 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 basic usage

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.

Selected date range is from 2025/01/21 to 2025/01/25.

Datepicker with quick select actions

Datepicker with localization

Date format is yyyy MMMM d. 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.

Datepicker with overrides

Datepicker with custom mask

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.

Selected date is 2020–01–01.

When using a custom mask formatString prop should be also set to match the mask format.

Datepicker with no mask

Date format is d.M.yyyy. Press the down arrow or enter key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date is 1.1.2020.

Some date formats will operate better without a restrictive input mask. You can disable that feature by applying null to the mask prop.

Calendar with time select actions

Calendar with multiple months

Calendar with multiple months and labels

Range Datepicker with Separate Inputs

Start Date
End Date

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.

Composed single pickers

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.

Selected date is 2019/04/01.

YYYY/MM/DD
12:00 PM
open
HH:MM
open

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.

Selected date range is from 2019/04/01 to 2019/04/10.

YYYY/MM/DD
12:00 PM
open
HH:MM
Arrow Right

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.

Selected date range is from 2019/04/01 to 2019/04/10.

yyyy/MM/DD
4:00 PM
open
HH:MM

Datepicker states

Disabled state

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.

9:00 AM
open
open
Positive state

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.

9:00 AM
open
open
Error state

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.

9:00 AM
open
open

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.

Selected date is 2025/01/21.

open

Overriding a nested component

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

Overriding and watching nested component callback

Quick Selected: nothing

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.

Selected date is 2020/01/01.

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: