Datepicker

Status: Unplanned

Lets users choose a single date from a visual calendar.

warning icon

Not yet developed

Because this component hasn't been developed, its documentation is incomplete. If you need to use this in a feature, it will need to be developed as a component first. Work with system team if the component is needed.

Type

Default

Default text input

Usage

The datepicker is used for prompting users to visually select a single date within a form.

Never use the datepicker for:

  • Any date that is many years in the past or future (i.e. Birth Date)
  • Date ranges

Behavior

The datepicker is triggered from a form select
Always drop datepicker down from a select on desktop and tablet
Always pop up from the bottom as a full-width, half modal on mobile

Visual style

Always maintain the component width.

On desktop and tablet, always keep datepicker left-aligned to its parent dropdown. It doesn’t have to right align with the dropdown
There are 4 different states of a date
On mobile, if it doesn’t fit the screen exactly, the modal background maintains the screen margins, but the picker states the same size

Accessibility

Characteristics

  • Appears as a text input field with a calendar icon which triggers the Datepicker (calendar widget) that appears below the input field
  • Alternatively appear as a dropdown which triggers the calendar widget that appears below the dropdown when activated

Keyboard/focus expectations

  • Enter/Spacebar opens calendar widget
  • Escape closes the calendar widget.Calendar widget receives keyboard focus when opened
  • Keyboard focus is trapped within calendar widget until it is closed or dismissed
  • Up/down arrow keys move to the same day in the next/previous week
  • Left/right arrow keys move to the next/previous day
  • Alt + Page Up/Page Dn switches to next/previous year
  • Page Up/Page Dn switches between the next/previous months
  • Date selected by pressing Enter
  • Keyboard focus returns to field containing the trigger for the calendar widget

Screen reader expectations

  • Date constraints are announced. Ex. “Dates prior to today’s date are unavailable.”
  • Calendar controls are announced
  • Date currently receiving focus is announced. Ex. “Tuesday, September 25, 2018.”
  • Selected date is announced. Ex. “Tuesday, September 25, 2018, Selected.
↑ Back to top