Component size, gzipped: 132kb

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

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

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

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

Calendar with multiple months

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

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

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.

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

NameTypeDescription
autoFocusCalendar
boolean
Defines if the calendar is set to be focused on an initial render.
clearable
boolean
Makes the datepicker clearable via a visual icon in the Input component.
disabled
boolean
Renders component in disabled state.
error
boolean
Renders component in error state.
excludeDates
array
A list of dates to disable. Array<Date>
filterDate
function
A filter function (Date => boolean) that is called to check the disabled state of a day. If false is returned the day is considered to be disabled.
formatString
string
String format passed to date-fns.
highlightDate
date
Indicates a highlighted date on hover and keyboard navigation
includesDates
array
A list Array<Date> of selectable dates.
locale
object
A locale object. See date-fns for more details https://github.com/date-fns/date-fns/tree/master/src/locale.
mask
string
Mask used for the text input. Passed to react-input-mask.
maxDate
date
A max date that is selectable.
minDate
date
A min date that is selectable.
monthsShown
number
A number of months rendered in the calendar.
onChange
function
Event handler that is called when a new date is selected.
onDayClick
function
Day's click event handler.
onDayMouseLeave
function
Day's mouseleave event handler.
onDayMouseOver
function
Day's mouseover event handler.
onMonthChange
function
Event handler that is called when the current rendered month is changed.
onYearChange
function
Event handler that is called when the current rendered month's year is changed.
orientation
enum
Sets the orientation of the calendar when multiple months are displayed
overrides
custom
Lets you customize all aspects of the component.
peekNextMonth
boolean
Defines if dates outside of the range of the current month are displayed.
positive
boolean
Renders component in positive state.
quickSelect
boolean
Display select for quickly choosing date ranges. range must be true as well.
quickSelectOptions
array
Array of custom options (Array<{ id: string; beginDate: Date; endDate?: Date }>) displayed in the quick select. Overrides default options if provided.
range
boolean
Defines if a range of dates can be selected.
size
enum
Renders component in provided size.
timeSelectEnd
boolean
Determines if TimePicker component will be enabled for end time
timeSelectStart
boolean
Determines if TimePicker component will be enabled for start time
trapTabbing
boolean
Defines if tabbing inside the calendar is circled within it.
value
array
Currently selected date (Date object).

Datepicker exports

You can import this module like so:

import {StatefulContainer} from 'baseui/datepicker'

It exports the following components or utility functions: