Disabled Dates

The DatePicker 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-datepicker id="weekend-date-picker"
            :value="new Date()"
            :disable-dates="disabled"></kendo-datepicker>
        </div>

       <div>
            <h4>Disable Holidays</h4>
            <kendo-datepicker id="holidays-date-picker"
            :value="new Date()"
            :disable-dates="disableDates"></kendo-datepicker>
        </div>
    </div>    
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        disabled: ["sa", "su"],
        disableDates: function (date) {
            var disabled = [13,14,20,21];
            if (date && disabled.indexOf(date.getDate()) > -1 ) {
                return true;
            } else {
                return false;
            }
        }
    }
})        

In this article