Skip to main content Skip to docs navigation

Keyboard Navigation

On this page

Thanks to Dimagi for sponsoring this feature. Keyboard navigation is supported for the date picker dialog. It can be toggled with display.keyboardNavigation. The default is true. I tried to adhere to the aria standards as much as possible for date time pickers.

Toggle Date Picker Dialog Button

Key Function
Space,
Enter
  • Open the date picker dialog.
  • Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.

Date Picker Dialog

Key Function
ESC Closes the dialog and returns focus to the "Choose Date" button.
Tab
  • Moves focus to next element in the dialog Tab sequence.
  • Note that, as specified in the Grid Pattern, only one button in the calendar grid is in the Tab sequence.
  • If focus is on the last button, moves focus to the first button.
Shift + Tab
  • Moves focus to previous element in the dialog Tab sequence.
  • Note that, as specified in the Grid Pattern, only one button in the calendar grid is in the Tab sequence.
  • If focus is on the first button, moves focus to the last button.

Date Picker Dialog: Month/Year Buttons

Key Function
Arrow keys On the month, year, decade view, using the arrow keys should navigate around the grid.

Date Picker Dialog: Date Grid

Key Function
Space,
Enter
  • Select the date, close the dialog, and move focus to the "Choose Date" button.
  • Update the value of the "Date" input with the selected date.
  • Update the accessible name of the "Choose Date" button to include the selected date.
Up Arrow Moves focus to the same day of the previous week.
Down Arrow Moves focus to the same day of the next week.
Right Arrow Moves focus to the next day.
Left Arrow Moves focus to the previous day.
Home Moves focus to the first day (e.g Sunday) of the current week.
End Moves focus to the last day (e.g. Saturday) of the current week.
Page Up
  • Changes the grid of dates to the previous month.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.
Shift + Page Up
  • Changes the grid of dates to the same month in the previous year.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.
Page Down
  • Changes the grid of dates to the next month.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.
Shift + Page Down
  • Changes the grid of dates to the same month in the next year.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.

Clock view

View Function
Clock Tab moves the focused element. Space/Enter will make a selection such as incrementing hours or minutes.
Hour/Minute/Seconds Arrow keys will move around the grid. Space/Enter will make a selection.