Blazor DateTimePicker Example - Keyboard Navigation and Accessibility
DateTimePicker functionalities can be accessed interactively through keyboard shortcuts. Various key combinations enable efficient interaction with the calendar and time popup.
Focus Navigation:
- Alt + J — Focuses on the first component of the sample
Input Navigation:
- Alt + Down Arrow — Opens the popup
- Alt + Down Arrow — Toggle between calendar and time selector popup when open
- Esc — Closes the popup
Date Selection:
- Enter — Selects the currently focused date
DatePicker Popup Navigation:
- Up Arrow — Focuses the same day on the previous week
- Down Arrow — Focuses the same day on the next week
- Left Arrow — Focuses the previous day
- Right Arrow — Focuses the next day
- Home — Focuses the first day of the month
- End — Focuses the last day of the month
- Page Up — Focuses the same date on the previous month
- Page Down — Focuses the same date on the next month
- Shift + Page Up — Focuses the same date on the previous year
- Shift + Page Down — Focuses the same date on the next year
- Ctrl + Home — Focuses the first date of the current year
- Ctrl + End — Focuses the last date of the current year
- Alt + Right Arrow — Focuses throughout the popup container in forward direction
- Alt + Left Arrow — Focuses throughout the popup container in backward direction
DatePicker Popup View Navigation:
- Ctrl + Up Arrow — Moves to inner view level (month to year, year to decade)
- Ctrl + Down Arrow — Moves to outer view level (decade to year, year to month)
Time Selection:
- Enter — Selects the currently focused item and closes the popup
TimePicker Navigation:
- Up Arrow — Navigate and select the previous item
- Down Arrow — Navigate and select the next item
- Home — Navigate and select the first item
- End — Navigate and select the last item