Datepicker
Lets users choose a single date from a visual calendar.
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.
Page sections
Type
Default
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
Visual style
Always maintain the component width.
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.”