Component size, gzipped: 138kb

Datepicker

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Datepicker in a popover

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.


Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date range is from 2020/05/26 to 2020/05/30.

Datepicker with quick select actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Datepicker with localization

Press the down arrow 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Calendar with time select actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Calendar with multiple months

May 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Composed single pickers

Press the down arrow 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
HH:MM

Composed range pickers

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date range is from to .

YYYY/MM/DD
HH:MM
Arrow Right

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date range is from to .

yyyy/MM/DD
HH:MM

Datepicker states

Disabled state

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Positive state

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Error state

Press the down arrow 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.js, and pass the date object from Moment.js to the datepicker.

Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.

Selected date is 2020/05/26.

Overriding a nested component

Press the down arrow 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).

API

Datepicker props

Datepicker exports

You can import this module like so:

import {StatefulContainer} from 'baseui/datepicker'

It exports the following components or utility functions: