angularkendo-uikendo-datepickerkendodaterangepicker

How to show past dates as disabled dates in kendo date picker

Hi I am using Kendo Date Picker for Kendo Angular UI. I am using min and max attribute of date picker to restrict user to select from specific range of date. But this completely Hide the out of the range dates likes this.

enter image description here

Instead I wanted to show them as disabled just like 29th February is disabled. Again this has been disabled using this api of kendo

Here the best case is to use min and max as it provide built-in validation, but when we cant controle them from outer CSS BECAUSE DOM ELEMENT ITSELF is not generating any dates and instead it shows the following tag

<td class="k-empty">&nbsp;</td>

here is what I am doing in HTML 

  <kendo-datepicker [id]="getId('startDate')"
                            [formatPlaceholder]="{ year: 'YYYY', month: 'MM', day: 'DD' }"
                            [navigation]="false" [min]="minimumDate"
                            (open)="onDatePickerOpen()" formControlName="startDate"></kendo-datepicker>

here Opendatepicker function disabled some of the dates based on busienss logic for example Feb 29th is disabled.

How to achieve this disabled look while still following min-max date range API ?

Solution

  • min and max attributes hides the dates out of range, so for disabling You can use disabledDates directive of kendo-datepicker

    <kendo-datepicker
      [(ngModel)]="value"
      [disabledDates]="disabledDates"
    >
</kendo-datepicker>

    TS:

    public disabledDates = (date: Date): boolean => {
    return date < this.minimumDate;
}

    Working Demo link