Blazor DateRangePicker Example - Keyboard Navigation
DateRangePicker functionality can be interactive with keyboard shortcuts. In the below sample, various key combinations can be used to interact with the DateRangePicker.
The DateRangePicker supports the following keyboard shortcuts to initiate various actions.
- Focus
- 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 pop-up container in the forward direction.
- Alt + Left arrow - Focuses throughout the pop-up container in the backward direction.
- Popup View Navigation
- Ctrl + Up arrow - Moves to the inner level of view like month to year and year to decade.
- Ctrl + Down arrow - Moves out from the depth level view like decade to year and year to month.