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 role

    Groups related inputs together; in this case, the day, month and year fields

  • grid role

    Set on the calendar widget

  • row role

    Contains grid cell elements

  • gridcell role

    Set on a cell

  • button role

    Set 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

References