Keyboard Navigation

The keyboard navigation of the DateTimePicker is always available.

The DateTimePicker supports the following keyboard shortcuts:

Shortcut Description
Alt+Down Arrow Opens the popup and moves the focus to the displayed Calendar or TimePicker.
Alt+Up Arrow Closes the popup and moves the focus to the input element.
Alt+Right Arrow When the popup is open, switches to the Time tab and focuses the TimePicker.
Alt+Left Arrow When the popup is open, switches to the Date tab and focuses the Calendar.
Up/Down/Left/Right Arrow Selects the adjacent date or time entry in the specified direction.
Page Up Scrolls to the previous month.
Page Down Scrolls to the next month.
Esc Discards the selection and closes the popup.
Enter Accepts the selected date and closes the popup.
@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-datetimepicker
                [value]="value"
            >
            </kendo-datetimepicker>
        </div>
    `
})

class AppComponent {
    public value: Date = new Date(2019, 5, 1, 22);
}

Navigation Scenarios

The DateTimePicker utilizes the keyboard shortcuts of its focused internal component. For more information on the available commands, refer to the respective articles for the DateInput, Calendar, and TimePicker components.

In this article