New to KendoReactStart a free 30-day trial

Keyboard Navigation

Managing the Focus

Focus goes through the two date inputs. The popup becomes the active element when it is opened, but it is not the focused element at any point.

Keyboard Shortcuts

Actions applied to the DateInput:

The DateRangePicker implements the keyboard shortcuts for the DateInput component:

DateInput specification

Apart from that, it also features the following shortcuts related to ist Popup:

ShortcutBehavior
EscCloses the popup
Alt/Opt(Mac) + DownOpens the popup
Alt/Opt(Mac) + UpCloses the popup

Actions applied to the Calendar:

Ones the popup is open, navigation is handled through the MultiViewCalendar component:

MultiViewCalendar specification

Resources

ARIA Authoring Practices: Date Picker Dialog

Change Theme
Theme
Loading ...

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.

See Also