All Components

Keyboard Navigation

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

The TimePicker supports the following keyboard shortcuts:

Shortcut Description
Alt+Down Arrow Opens the popup and moves the focus to the displayed calendar.
Alt+Up Arrow Closes the popup and moves the focus to the input element.
Esc Closes the popup and moves the focus to the input element.
Tab Moves focus to the next time section in the popup.
Enter Accepts the current value change.
@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper" style="min-height: 400px">
            <kendo-timepicker
                [value]="value"
            ></kendo-timepicker>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10, 0, 0, 0);
}

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:

Shortcut Description
Up Arrow Increments the value of the focused time section.
Down Arrow Decrements the value of the focused time section.
Tab Moves the focus to the next time section in the popup.
Shift+Tab Moves the focus backwards.
Enter Accepts the current value change.
In this article