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.

The DateTimePicker-no- Component is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the DateTimePicker in action.

View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features


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"
                          style="width: 250px">
new Vue({
    el: '#app',
    methods: {
        onOpen: function (e) {
            console.log("DateTimePicker is opened");
        onClose: function (e) {
            console.log("DateTimePicker is closed");