Keyboard Navigation

The keyboard support of the DatePicker is always available.

The DatePicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Access Key+w  Focuses the DatePicker.

When the popup is opened, the DatePicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Left Arrow  Highlights the previous day part.
 Right Arrow  Highlights the next day part.
 Up Arrow  Highlights the same day from the previous week.
 Down Arrow  Highlights the same day from the next week.
 Ctrl+Left Arrow Navigates to the previous month.
 Ctrl+Right Arrow Navigates to the next month.
 Ctrl+Up Arrow Navigates to the previous view.
 Ctrl+Down Arrow Navigates to the next view.
 Home Highlights the first day of the month.
 End Highlights the last day of the month.
 Enter or Space If in the month view, selects the highlighted day. In other views, navigates to lower view.

When the popup is closed, the DatePicker supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Enter  Triggers the change event.
 Esc  Closes the popup.
 Alt+Up Arrow  Closes the popup.
 Alt+Down Arrow  Opens the popup.
<div id="vueapp" class="vue-app">
    <kendo-datepicker></kendo-datepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp'
})

In this article