New to Kendo UI for Vue? Start a free 30-day trial

Keyboard Navigation

By default, the keyboard navigation of the TimePicker is enabled.

The TimePicker supports the following keyboard shortcuts:

ShortcutDescription
Alt+Down ArrowOpens the popup and moves the focus to the displayed time selector.
Alt+Up ArrowCloses the popup and moves the focus to the input element.
EscCloses the popup.
Left Arrow/Right ArrowMoves focus to the next/previous time section in the popup.
EnterAccepts the current value change.
Example
View Source
Change Theme:

Navigation Scenarios

When the input of the TimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the DateInput.

When the popup of the TimePicker is opened, the hours become focused and the following shortcuts become available:

ShortcutDescription
Up ArrowIncrements the value of the focused time section.
Down ArrowDecrements the value of the focused time section.
Left Arrow/Right ArrowMoves focus to the next/previous time section in the popup.
TabMoves the focus back to the date input and closes the popup.
EnterAccepts the current value change.

In this article

Not finding the help you need?