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

Question

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.

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 ?

Answer 1

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

Answer 2

If you didn't find any solution with min and max attributes.

To achieve what you want you can use the Disable Dates API to disable every even date in the DatePicker : Docs

Example :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-datepicker
      [(ngModel)]="value"
      [disabledDates]="disabledDates"
    >
    </kendo-datepicker>
  `
})
export class AppComponent {
  public value: Date;

  public disabledDates = (date: Date): boolean => {
    const min  = new Date(2019, 1, 1);
    const max = new Date(2022, 1, 1);
    return date < min || date > max;
  }
}