Blazor DateTimePicker Example - Keyboard Navigation

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