Date Range Calendar

Inline dual-month calendar for selecting a date range bound to DateTimeRange.

DateRangeCalendar renders one or two month grids with range highlighting, hover preview, and click-to-complete selection. Range pickers compose this panel behind a field trigger. Document range surfaces with DatePickerFeatures::RANGE_PICKERS — there is no runtime license check.

  • Popover or inline panels for booking and reporting date ranges
  • Building blocks inside DateRangePicker
  • Bind Option<DateTimeRange> via DateRangeCalendarBind.
  • Set appearance.calendars to 1 or 2 month panels.
  • Wrap preview examples in a native element with data-testid.
Dual month range

Two month panels with bind readout for E2E.

July 2026
SunMonTueWedThuFriSat
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
1
August 2026
SunMonTueWedThuFriSat
26
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
none
Bind readout

Completing a two-click range updates the bound DateTimeRange.

July 2026
SunMonTueWedThuFriSat
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
1
August 2026
SunMonTueWedThuFriSat
26
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
none
Single month panel

Compact layouts can show one calendar month.

July 2026
SunMonTueWedThuFriSat
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
1