Date Picker
Date pickers allow users to choose a single date or a range of dates
Last updated
Was this helpful?
Date pickers allow users to choose a single date or a range of dates
Last updated
Was this helpful?
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.
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
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.
This section provides interaction design for keyboard, screen reader, voice & pointing devices.
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.
SPACEBAR or ENTER key will start or end a date range selection
ESC key will close the date picker, retaining any date selection.
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.
Date button can be activated via visual label, e.g. "Click button 12".
Picker can be closed via, "Press Escape".
todo
This section is not yet available.
Previous and next month icon buttons require a programmatic label for assistive technology.
The main calendar table can be given a custom description, such as "Calendar".
When a date button inside of the grid receives focus, keyboard interaction switches to a 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.
