Edit this page
[?] Component size, gzipped: 216kb

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

Examples

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

Calendar with multiple months

April 2022
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
May 2022
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 certian 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

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

In this example we use a nested override to customize the ListItem within the month/year dropdown (MonthYearSelectStatefulMenu).

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!

API

Calendar API

autoFocusCalendar boolean = false

Defines if the calendar is set to be focused on an initial render.

excludeDates nullable Array<Date> = null

A list of dates to disable.

ArrayDate

quickSelect boolean

Display select for quickly choosing date ranges. range must be true as well.

quickSelectOptions Array<object>

Array of custom options displayed in the quick select. Overrides default options if provided.

Array
id string required
beginDate required Date

filterDate nullable function = null

A filter function that is called to check the disabled state of a day. If false is returned the day is considered to be disabled.

Date => boolean

highlightedDate nullable Date = null

Indicates a highlighted date on hover and keyboard navigation

Date

includeDates nullable Array<Date> = null

A list of selectable dates.

ArrayDate

range boolean = false

Defines if a range of dates can be selected.

locale nullable any = null

A locale object. See date-fns for more details https://github.com/date-fns/date-fns/tree/master/src/locale.

any

maxDate nullable Date = null

A max date that is selectable.

Date

minDate nullable Date = null

A min date that is selectable.

Date

monthsShown number

A number of months rendered in the calendar.

onDayClick function = () => undefined

Day's click event handler.

date required Date
event required Event
 => mixed

onDayMouseOver function = () => undefined

Day's mouseover event handler.

date required Date
event required Event
 => mixed

onDayMouseLeave function = () => undefined

Day's mouseleave event handler.

date required Date
event required Event
 => mixed

onMonthChange function = () => undefined

Event handler that is called when the current rendered month is changed.

date required Date
 => mixed

onYearChange function = () => undefined

Event handler that is called when the current rendered month's year is changed.

date required Date
 => mixed

onChange function = () => undefined

Event handler that is called when a new date is selected.

date union required One of
Date,
ArrayDate
 => mixed

orientation $Values<typeof ORIENTATION> =

Sets the orientation of the calendar when multiple months are displayed

$ValuesObject.freeze({ horizontal: "horizontal", vertical: "vertical" })

overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectIconContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectPopover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectStatefulMenu: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, WeekdayHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Month: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Week: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Day: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Input: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Popover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object> = {}

{ Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectIconContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectPopover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectStatefulMenu: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, WeekdayHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Month: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Week: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Day: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Input: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Popover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }Object

peekNextMonth boolean = false

Defines if dates outside of the range of the current month are displayed.

timeSelectStart boolean

Determines if TimePicker component will be enabled for start time

timeSelectEnd boolean

Determines if TimePicker component will be enabled for end time

trapTabbing boolean = false

Defines if tabbing inside the calendar is circled within it.

value union = null

Currently selected date.

One of
Date,
ArrayDate

Datepicker API

autoFocusCalendar boolean

Defines if the calendar is set to be focused on an initial render.

excludeDates nullable Array<Date>

A list of dates to disable.

ArrayDate

quickSelect boolean

Display select for quickly choosing date ranges. range must be true as well.

quickSelectOptions Array<object>

Array of custom options displayed in the quick select. Overrides default options if provided.

Array
id string required
beginDate required Date

filterDate nullable function

A filter function that is called to check the disabled state of a day. If false is returned the day is considered to be disabled.

Date => boolean

highlightedDate nullable Date

Indicates a highlighted date on hover and keyboard navigation

Date

includeDates nullable Array<Date>

A list of selectable dates.

ArrayDate

range boolean

Defines if a range of dates can be selected.

locale nullable any

A locale object. See date-fns for more details https://github.com/date-fns/date-fns/tree/master/src/locale.

any

maxDate nullable Date

A max date that is selectable.

Date

minDate nullable Date

A min date that is selectable.

Date

monthsShown number

A number of months rendered in the calendar.

onDayClick function

Day's click event handler.

date required Date
event required Event
 => mixed

onDayMouseOver function

Day's mouseover event handler.

date required Date
event required Event
 => mixed

onDayMouseLeave function

Day's mouseleave event handler.

date required Date
event required Event
 => mixed

onMonthChange function

Event handler that is called when the current rendered month is changed.

date required Date
 => mixed

onYearChange function

Event handler that is called when the current rendered month's year is changed.

date required Date
 => mixed

onChange function

Event handler that is called when a new date is selected.

date union required One of
Date,
ArrayDate
 => mixed

orientation $Values<typeof ORIENTATION>

Sets the orientation of the calendar when multiple months are displayed

$ValuesObject.freeze({ horizontal: "horizontal", vertical: "vertical" })

overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectIconContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectPopover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectStatefulMenu: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, WeekdayHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Month: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Week: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Day: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Input: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Popover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object>

{ Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, QuickSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelect: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TimeSelectFormControl: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, CalendarHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, PrevButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, NextButtonIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectButton: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectIconContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectPopover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, MonthYearSelectStatefulMenu: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, WeekdayHeader: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Month: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Week: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Day: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Input: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Popover: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }Object

peekNextMonth boolean

Defines if dates outside of the range of the current month are displayed.

timeSelectStart boolean

Determines if TimePicker component will be enabled for start time

timeSelectEnd boolean

Determines if TimePicker component will be enabled for end time

trapTabbing boolean

Defines if tabbing inside the calendar is circled within it.

value union = null

Currently selected date.

One of
Date,
ArrayDate

"aria-label" string

"aria-labelledby" string

"aria-describedby" nullable string = "datepicker--screenreader--message--input"

disabled boolean

error boolean

Renders UI in 'error' state.

positive boolean

placeholder string

required boolean

formatDisplayValue function

function
One of
Date,
ArrayDate
,
string
=> string

formatString string

mountNode HTMLElement

Where to mount the popover

HTMLElement

onClose function

Called when calendar is closed

() => mixed

mask string

TimePicker API

format union = "12"

Render options in AM/PM format or 24 hour format. Defaults to 12 hour.

One of
"12",
"24"

onChange function

Callback for when time selection changes.

Date => mixed

overrides object

Select { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

creatable boolean = false

Set to true to allow times that aren't displayed in the options list to be entered manually. Defaults to false.

step number = 900

Amount of seconds between each option time. Defaults to 900 (15 minutes).

value nullable Date

Optional value that can be provided to fully control the component. If not provided, TimePicker will manage state internally and default to the closest step to new Date().

Date

disabled boolean

error boolean

positive boolean

TimezonePicker API

date Date

If not provided, defaults to new Date(). Important to note that the timezone picker only displays options related to the provided date. Take Pacific Time for example. On March 9th, Pacific Time equates to the more specific Pacific Standard Time. On March 10th, it operates on Pacific Daylight Time. The timezone picker will never display PST and PDT together. If you need exact specificity, provide a date. Otherwise it will default to the relevant timezone at render.

Date

mapLabels function

Customize the option's label. Useful for translations and optionally mapping from 'America/Los_Angeles' to 'Pacific Time'.

$ReadOnly
id union One of
string,
number
label Node
disabled boolean
clearableValue boolean
isCreatable boolean
=> Node

onChange function

Callback for when the timezone selection changes.

id string required
label string required
offset number required
=> mixed

overrides object

Select { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

value nullable string

Optional value that can be provided to fully control the component. If not provided, TimezonePicker will manage state internally.

disabled boolean

error boolean

positive boolean

Datepicker exports

You can import this module like so:

import {StatefulContainer} from 'baseui/datepicker'

It exports the following components or utility functions:

  • StatefulContainer
  • Calendar
  • StatefulCalendar
  • Datepicker
  • StatefulDatepicker
  • TimePicker
  • TimezonePicker
  • formatDate
  • ORIENTATION
  • STATE_CHANGE_TYPE
  • StyledRoot
  • StyledMonthContainer
  • StyledCalendarContainer
  • StyledSelectorContainer
  • StyledCalendarHeader
  • StyledMonthHeader
  • StyledMonthYearSelectButton
  • StyledMonthYearSelectIconContainer
  • StyledPrevButton
  • StyledNextButton
  • StyledMonth
  • StyledWeek
  • StyledDay