Time Ranges and Formats

The TimePicker enables you to set time ranges and formats.

To configure the time ranges, use the min and max properties. To set the time format, use the time property.

<div id="vueapp" class="vue-app">
    <kendo-timepicker :min="minDate"
                      :max="maxDate"
                      :value="currentDate"
                      :interval="15"
                      :time="'(hh:mm))'">
    </kendo-timepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        minDate: new Date(2017, 9, 15, 2, 30),
        maxDate: new Date(2017, 9, 15, 16, 30),
        currentDate: new Date(2017, 9, 15, 10, 30)
    }
})

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

<div id="vueapp" class="vue-app">
   <kendo-timepicker :value="currentDate"                       
                     :time="'(hh:mm))'">
    </kendo-timepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {       
        currentDate: new Date(2018, 9, 15)
    }
})

In this article