Date pickers

A day, or two that belong together: DatePicker and DateRangePicker triggers, inline calendars, and a bare DateInput. React Aria owns the grid and locale.

Demo

hero
Component
Trigger size
import { CalendarDate } from "@internationalized/date"; import { DatePicker } from "@/components/application/date-picker/date-picker"; <DatePicker aria-label="Delivery date" defaultValue={new CalendarDate(2027, 1, 8)} onApply={commit} />

In context

in-context
View in a page

Family

family
DatePicker
DateRangePicker

Calendar, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
Calendar, CalendarContextProvider

Range calendar, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
RangeCalendar, RangeCalendarContextProvider
CalendarCell
RangePresetButton
mmddyyyy
DateInput

Types

cells

The sheet’s Type axis: Single date, Dual dates, Available times.

The trigger

Single date: DatePicker
Dual dates: DateRangePicker
Available times: a Button, composed

The menu

Delivery date, January 2027

mmddyyyy
27
28
29
30
31
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
1
2
3
4
5
6
Single date

Report period, January to February 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6

February 2027

31
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
1
2
3
4
5
6
182027
–
1192027
Dual dates, from lg

Appointment date, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
Available times
182027
Available times, desktop

Appointment date, January 2027

182027
27
28
29
30
31
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
1
2
3
4
5
6
Available times, mobile

Sizes

cells
size xs
size sm
size md
size lg
size xl

Layouts

cells

The calendar

Calendar with the default row, January 2027

mmddyyyy
27
28
29
30
31
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
1
2
3
4
5
6
the default row: a date field and Today

Calendar, grid only, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
children empty: header and grid

The range calendar

Range calendar, one month, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
visibleDuration one month

Range calendar, two months, January to February 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6

February 2027

31
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
1
2
3
4
5
6
visibleDuration two months

Range calendar with the preset row, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
presets with showPresetsOnDesktop: the row above the grid

Presets

the sidebar list, This week pressed

Billing period, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
beside a one-month grid, one context

Content

cells

The trigger

empty: Select date
empty range: Select dates
empty Available times
the widest range: All time

The date field

mmddyyyy
DateInput: placeholder segments
182027
DateInput under a DateField, filled

Behaviour

cells

The range picker’s two cutovers, open in real viewports.

below md: one month, the input pair, the preset row
between md and lg: two months, no sidebar
from lg: the preset sidebar

States

cells

The sheet’s twelve cell states on live calendars; hover the hover ones.

The cell

Calendar with no selection, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
default; hover and keyboard focus, live

Calendar with a selected day, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
selected

Calendar opening on today, September 2026

30
31
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
1
2
3
today, from the clock

Calendar with highlighted days, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
highlighted: the marker dot

Calendar with bounds, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
disabled by bounds: minValue and maxValue

Disabled calendar with a selected day, January 2027

27
28
29
30
31
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
1
2
3
4
5
6
isDisabled with a selected day

Range calendar band, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
in range: the band

Range calendar without out-of-range days, January 2027

January 2027

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
in range, showOutOfRangeDates false

Disabled range calendar, January 2027

January 2027

27
28
29
30
31
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
1
2
3
4
5
6
in range and disabled

Disabled calendar opening on today, September 2026

30
31
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
1
2
3
today and disabled

The trigger

isDisabled
isDisabled, range

The preset row

unpressed; hover and focus, live
pressed: This week