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);
}
}
})