All Components

DatePicker Overview

The DatePicker combines the Kendo UI DateInput and Calendar components.

It enables the user to enter or pick a date value.

The DatePicker wrapper for Vue is a client-side wrapper for the Kendo UI DatePicker widget.

Basic Usage

The following example demonstrates the DatePicker in action.

<div id="vueapp" class="vue-app">
<h5>Selected date: {{date}}</h5>
    <kendo-datepicker v-model="date"></kendo-datepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        date: null
    }
})

Features and Functionalities

The DatePicker enables you to set date ranges and formats.

<div id="app">
    <kendo-datepicker :min="minDate"
                      :max="maxDate"
                      :value="currentDate"
                      :format="'yyyy/MM/dd'">
    </kendo-datepicker>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            minDate: new Date(2017, 9, 1),
            maxDate: new Date(2017, 10, 1),
            currentDate: new Date(2017, 9, 15)
        }
    })
</script>

Events

The following example demonstrates basic DatePicker events. You can subscribe to all DatePicker events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-datepicker v-on:open="onOpen" v-on:close="onClose"></kendo-datepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onOpen: function (e) {
            console.log("DatePicker is opened");
        },
        onClose: function (e) {
            console.log("DatePicker is closed");
        }
    }
})
In this article