All Components

DateInput Overview

The DateInput represents an input field that recognizes and formats scheduling values such as dates.

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

Basic Usage

The following example demonstrates the DateInput in action.

<div id="vueapp" class="vue-app">
    <kendo-dateinput v-model="date"></kendo-dateinput>
    <p>(use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and <code>↓</code> to update)</p>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        date: null
    }
})

Features and Functionalities

The DateInput enables you to set date ranges and formats.

<div id="vueapp" class="vue-app">
    <kendo-dateinput :min="minDate"
                     :max="maxDate"
                     :value="currentDate"
                     :format="'yyyy/MM/dd'">
    </kendo-dateinput>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        minDate: new Date(2017, 9, 1),
        maxDate: new Date(2017, 10, 1),
        currentDate: new Date(2017, 9, 15)
    }
})

Events

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

<div id="vueapp" class="vue-app">
 <kendo-dateinput v-on:change="onChange"></kendo-dateinput>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onChange: function (e) {
            var selectedValue = e.sender.value();
            console.log("New value is : " + selectedValue);
        }
    }
})
In this article