Blazor DateTimePicker Example - Keyboard Navigation
DateTimePicker functionalities can be interactive with keyboard shortcuts. In the below sample, various key combinations can be used to interact with the calendar and time popup.
The DateTimePicker 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 + Down arrow - Toggle between calendar and time selector popup when popup is 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 through out the pop-up container in forward direction.
- Alt + Left arrow - Focuses through out the pop-up container in backward direction.
- DatePicker 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.
- 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 first item.