Date pickers

React v2

Package-backed DatePicker and DateRangePicker triggers, calendars, cells, and presets. DateInput remains a local composition rather than a public package export.

Demo

hero
Component
Trigger size
import { CalendarDate } from "@internationalized/date"; import { DatePicker } from "@parentsquare/squarekit-react-v2/date-pickers"; <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, October 2026

27
28
29
30
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, CalendarContextProvider

Range calendar, October 2026

October 2026

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
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, October 2026

mmddyyyy
27
28
29
30
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
Single date

Report period, October to November 2026

October 2026

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

November 2026

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
mmddyyyy
–
mmddyyyy
Dual dates, from lg

Appointment date, October 2026

27
28
29
30
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
Available times
mmddyyyy
Available times, desktop

Appointment date, October 2026

mmddyyyy
27
28
29
30
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
Available times, mobile

Sizes

cells
size xs
size sm
size md
size lg
size xl

Layouts

cells

The calendar

Calendar with the default row, October 2026

mmddyyyy
27
28
29
30
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
the default row: a date field and Today

Calendar, grid only, October 2026

27
28
29
30
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
children empty: header and grid

The range calendar

Range calendar, one month, October 2026

October 2026

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
visibleDuration one month

Range calendar, two months, October to November 2026

October 2026

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

November 2026

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
visibleDuration two months

Range calendar with the preset row, October 2026

October 2026

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
presets with showPresetsOnDesktop: the row above the grid

Presets

the sidebar list, This week pressed

Billing period, October 2026

October 2026

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
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, October 2026

27
28
29
30
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
default; hover and keyboard focus, live

Calendar with a selected day, October 2026

27
28
29
30
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
selected

Calendar opening on today, October 2026

27
28
29
30
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
today, from the clock

Calendar with highlighted days, October 2026

27
28
29
30
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
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, October 2026

27
28
29
30
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
isDisabled with a selected day

Range calendar band, October 2026

October 2026

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: the band

Range calendar without out-of-range days, October 2026

October 2026

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, October 2026

October 2026

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 and disabled

Disabled calendar opening on today, October 2026

27
28
29
30
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
today and disabled

The trigger

isDisabled
isDisabled, range

The preset row

unpressed; hover and focus, live
pressed: This week