Date and time

Range Calendar

A dual-date selection component that allows users to pick a date range, commonly used for booking and scheduling.

Basic

A range calendar displays one or more date grids and allows users to select a range of dates.

Range Calendar, April 2025

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

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Range Calendar comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Controlled

The range calender can be controlled by passing the value prop.

Date range (controlled), April 2025

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

Uncontrolled

The range calendar can be uncontrolled by passing the defaultValue prop.

Date range (uncontrolled), April 2025

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

Examples

You can see the calendar in action within the Date Picker and Date Range Picker documentation.

Previous
Calendar
Next
Time Field