Range Selection
The DateTimePicker enables you to define value ranges for selection.
The following example demonstrates how to set range selection only if the entered date is valid and is within the defined range.
<div id="vueapp" class="vue-app">
<div style="display:inline-flex">
<div style="margin-right:20px">
<h4>Start:</h4>
<kendo-datetimepicker id="start"
:value="today"
:parse-format="['MM/dd/yyyy']"
v-on:change="startChange"></kendo-datetimepicker>
</div>
<div>
<h4>End:</h4>
<kendo-datetimepicker id="end" v-on:change="endChange"
:value="today"
:parse-format="['MM/dd/yyyy']"
v-on:change="endChange"></kendo-datetimepicker>
</div>
</div>
</div>Vue.use(DateinputsInstaller);
new Vue({
el: '#vueapp',
data: {
today: new Date()
},
mounted () {
var start = $("#start").data("kendoDateTimePicker");
var end = $("#end").data("kendoDateTimePicker");
start.max(end.value());
end.min(start.value());
},
methods: {
startChange: function (e) {
var start = $("#start").data("kendoDateTimePicker");
var end = $("#end").data("kendoDateTimePicker");
var startDate = start.value(),
endDate = end.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
} else if (endDate) {
start.max(new Date(endDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
},
endChange: function (e) {
var start = $("#start").data("kendoDateTimePicker");
var end = $("#end").data("kendoDateTimePicker");
var endDate = end.value(),
startDate = start.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
} else if (startDate) {
end.min(new Date(startDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
}
})