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