A date range picker composed of multiple inputs — start and end date fields for keyboard input and a calendar widget for visual selection
WAI-ARIA checklist
group
roleGroups related inputs together; in this case, the day, month and year fields
grid
roleSet on the calendar widget
row
roleContains grid cell elements
gridcell
roleSet on a cell
button
roleSet on a child in the gridcell to indicate interactivity
grid
aria-current=date
Set on the element that represents the current date.
aria-activedescendant
Set on the current active element
aria-multiselectable
Specifies if more than one item can be selected
gridcell button
aria-selected
Set on selected items
aria-disabled
(optional)Specifies if item is disabled
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
1
2
3
4
5
6
7
8
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
1
2
3
4
5
6
7
8
From
//→
To
//SEPTEMBER2023
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
1
2
3
4
5
6
7
8