Datepicker

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

Datepicker

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

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.

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

Datepicker with localization

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

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

TimePicker

Timezone picker

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

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.

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.

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.

yyyy/MM/DD
HH:MM

Overrides

Additionally, you can fully customize any part of the Datepicker through the overrides prop. The Datepicker consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

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

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Calendar API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Datepicker API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

TimePicker API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

TimezonePicker API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>