New to Kendo UI for Vue? Start a free 30-day trial
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.
Example
View Source
Change Theme:
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)
}
})