Getting Started with Kendo UI for Vue DatePicker

The Kendo UI for Vue DatePicker combines the Kendo UI for Vue DateInput and Calendar components and enables the user to enter or pick a date value.

The Kendo UI for Vue DatePicker component is part of the Kendo UI for Vue library of Vue UI components. It is distributed through NPM under the kendo-vue-dateinputs package.

Basic Usage

The following example demonstrates the DatePicker in action.

<div id="vueapp" class="vue-app">
   <div class="example-wrapper" >
        <datepicker />
        <p>(use Alt+<code>↓</code> to open the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
    </div>
</div>
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp'
});

Functionality and Features

Events

The following example demonstrates basic DatePicker events.

In this article