All Components

DateTimePicker Overview

The DateTimePicker combines the Kendo UI DateInput and Calendar components.

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

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

Basic Usage

The following example demonstrates the DateTimePicker in action.

<div id="vueapp" class="vue-app">
<h5>Selected date: {{date}}</h5>

<kendo-datetimepicker v-model="date" style="width: 250px"></kendo-datetimepicker>
<p>(use Alt+↓ to open the time list, Tab to move to the next time section in the popup, ↑ to increment and ↓ to decrement the value)</p>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        date: null
    }
})

Features and Functionalities

Date Ranges

The following example demonstrates how to configure the min and max dates, and the date format.

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

Formats

The following example demonstrates how to configure the time interval and format for the time view.

<div id="vueapp" class="vue-app">
    <kendo-datetimepicker :value="currentDate"
                          :interval="15"
                          :format="'yyyy/MM/dd hh:mm'"
                          :time-format="'(hh:mm)'"
                          style="width: 250px">
    </kendo-datetimepicker>
</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 DateTimePicker events. You can subscribe to all DateTimePicker events by the handler name.

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