Keyboard Navigation
By default, the keyboard navigation of the DateRangePicker is enabled.
The DateRangePicker supports the following keyboard shortcuts:
| Shortcut | Description |
|---|---|
Alt+Down Arrow | Opens the popup. |
Alt+Up Arrow | Closes the popup and moves the focus to the start or to an empty input element. |
Esc | Closes the popup and moves the focus to the start or to an empty input element. |
Tab | Moves the focus from the start input to the end input, or from the end input to the calendar element. |
Left Arrow | Navigate to previous date segment. |
Right Arrow | Navigate to next date segment. |
Up Arrow | Increment the value. |
Down Arrow | Decrement the value. |
Example
View Source
Change Theme:
Navigation Scenarios
When the popup of the DateRangePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the MultiViewCalendar.
When the inputs of the DateRangePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the DateInput.
