All Components

Components / DateInputs / TimePicker

TimePicker Overview

The TimePicker represents a time-list where the user can enter or pick time values.

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

Basic Usage

The following example demonstrates the TimePicker in action.

<div id="vueapp" class="vue-app">
    <h5>Selected time: {{date}}</h5>
    <kendo-timepicker v-model="date"
                      :min="min"
                      :max="max"
                      :value="value"    
                      style="width: 250px"></kendo-timepicker>    
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        date: null,
        value: "8:00 AM",
        min: new Date(1950, 0, 1, 8, 0, 0),
        max: new Date(2049, 11, 31, 18, 0, 0)
    }
})

Functionality and Features

Events

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

<div id="vueapp" class="vue-app">
    <kendo-timepicker v-on:open="onOpen" v-on:close="onClose"></kendo-timepicker>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onOpen: function (e) {
            console.log("TimePicker is opened");
        },
        onClose: function (e) {
            console.log("TimePicker is closed");
        }
    }
})
In this article