Blazor DateRangePicker Example - Keyboard Navigation

DateRangePicker functionalities can be accessed interactively through keyboard shortcuts. Various key combinations enable efficient interaction with the DateRangePicker component.

Focus Navigation:

• Alt + J — Focuses on the first component of the sample

Input Navigation:

• Alt + Down Arrow — Opens the popup
• Alt + Up Arrow — Closes the popup
• Esc — Closes the popup

Date Selection:

• Enter — Selects the currently focused date

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

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)