Date Ranges and Formats

The DateTimePicker enables you to set date ranges and formats.

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

<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()
    }
})

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

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

In this article