Date Picker

Date pickers allow users to choose a single date or a range of dates


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

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.


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.


Date button can be activated via visual label, e.g. "Click button 12".

Picker can be closed via, "Press Escape".



Developer Guide


ARIA Reference


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".

Last updated