Date Picker

Lab component

DatePicker allows users to specify a single day or range of dates by typing directly into an input field or selecting one from a calendar.

  • Clearly indicate dates that can’t be selected, e.g., weekend, non-trading or other blocked days, if relevant to your use case.
  • Consider showing date options in a Dropdown, instead of a Date Picker, if the date or range is pre-determined and can’t be specified by the user.
KeyFunction
Tab
  • If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area.
  • If the input is disabled, Tab skips the input.
  • If the input has focus, Tab moves focus to the calendar button, if there is a valid date in a wrong format, it formats the date.
  • If focus is on the calendar button and the panel is open, Tab moves focus to the selected day, current day or first day of the month.
  • If focus is within the panel, Tab moves focus to the next focusable navigation element in the calendar.
Shift + Tab
  • If focus is on the input, Shift + Tab moves focus out of the component to the previous component in the tab order.
  • If focus is on the calendar button, Shift + Tab moves focus into the input.
  • If focus is within the panel, Shift + Tab moves focus to the last focusable navigation element in the calendar.
Enter
  • If focus is on the button Enter toggles the calendar.
  • If focus is on the input, Enter formats the input text as date.
Space
  • When the input area has focus, Space inserts a character at the position of the text cursor.
  • If the calendar button has focus, Space toggles the calendar.
Right Arrow

When the input area has focus:

  • If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight.
  • If the text cursor is displayed, it is positioned on the alternative side of the following character. If is there is no following character, there is no effect.
Left Arrow

When the input area has focus:

  • If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight.
  • If the text cursor is visible, Left Arrow positions it on the alternative side of the following character. If there's no preceding character, there's no effect.
Shift + Left Arrow / Shift + Right Arrow

When the input area has focus, drags selection over text characters, one at a time.

Backspace

When the input area has focus and:

  • Text is highlighted, this action removes all highlighted characters.
  • The text cursor is positioned to the right of text, this action removes the preceding character.
Alphanumeric / Special keys

When the input area has focus, this action inserts the relevant character at the position of the text cursor.

Control + A / Command + A

This action highlights all strings within the field.