Components / Date Inputs / DateInput

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.

The input in each section of the DateInput is always valid for the relevant section. For example, you cannot enter 23 in the month section. As a result, the value in DateInput is always any valid date.

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

Functionality and Features

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