Disabled Dates
The DateRangePicker allows you to disable certain days which are not intended to be selected by the end user—for example, weekends, national holidays, and others.
To disable a date, either:
- Set an array of dates, or
- Add a function to determine the return value for the date that is disabled.
<div id="vueapp" class="vue-app">
<div style="display:inline-flex">
<div style="margin-right: 20px">
<h4>Disable Weekend</h4>
<kendo-daterangepicker id="weekend-date-picker"
:range="currentRange"
:disable-dates="disabled">
</kendo-daterangepicker>
</div>
<div>
<h4>Disable Holidays</h4>
<kendo-daterangepicker id="holidays-date-picker"
:range="currentRange"
:disable-dates="disableDates">
</kendo-daterangepicker>
</div>
</div>
</div>Vue.use(DateinputsInstaller);
new Vue({
el: '#vueapp',
data: {
currentRange: {start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 2))},
disabled: ["sa", "su"],
disableDates: function (date) {
var disabled = [13,14,20,21];
if (date && disabled.indexOf(date.getDate()) > -1 ) {
return true;
} else {
return false;
}
}
}
})