Date Picker
Date pickers allow users to choose a single date or a range of dates
Introduction
A custom date picker is usually presented in tandem with a textfield, as an alternative means to enter dates and date ranges with a calendar based interface.
Terminology
Single calendar: one calendar month is presented at a time
Double calendar: two calendar months are presented at a time
Calendar title: the month and year
Calendar headers: the days of the week, acting as column headers
Previous month button: moves calendar back one month
Next month button: move calendar forward one month
Date buttons: selects date. Doing so a second time will create a date range
Date states: date buttons can represent multiple states
Start Date
End Date
Current Date
Date Range: a range from start date to end date
Best Practices
A date picker should have a layout familiar with other popular systems and conventions. A data table works well.
Dates may be disabled if they are outside of the allowed time range.
Interaction Design
This section provides interaction design for keyboard, screen reader, voice & pointing devices.
Keyboard
The date picker exposes 3 keyboard focusable areas with TAB key:
The previous month button
The next month button
A date button*
*Which date button receives focus can change depending on certain factors.
When a date button inside of the grid receives focus, keyboard interaction switches to a roving tabindex based style, using the ARROW keys, e.g. RIGHT-ARROW moves to the button in the next cell to the right, DOWN-ARROW moves to the button in the cell below.
SPACEBAR or ENTER key will start or end a date range selection
ESC key will close the date picker, retaining any date selection.
Screen Reader
Date buttons are announced with the day of month, e.g. "12, button". The day of week and month are available on the containing table cell element (see below).
When navigating calendar in table mode, month is announced via table caption semantics.
When navigating calendar in table mode, days of week are announced via table column header semantics.
Voice
Date button can be activated via visual label, e.g. "Click button 12".
Picker can be closed via, "Press Escape".
Pointer
todo
Developer Guide
todo
ARIA Reference
aria-label
Previous and next month icon buttons require a programmatic label for assistive technology.
role-description
The main calendar table can be given a custom description, such as "Calendar".
Last updated
