GitHubReact Aria

Date picker components

Learn how to use the date picker components in your project.

Date picker example

Installation

You can add this date picker component using our CLI or manually:

npx untitledui add date-picker

Date picker examples

Below are examples and variations of this date picker component:

Date picker

Date range picker with presets

Calendar

Calendar, June 2025

mmddyyyy
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
4
5

Calendar card

Range calendar

Range calendar, June to July 2025

June 2025

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

July 2025

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

Range calendar card

NotificationsCalendars