Как показать прошлые даты как отключенные даты в кендо

Question

Привет. Я использую Kendo Date Picker для Kendo Angular UI. Я использую атрибут min и max средства выбора даты, чтобы ограничить выбор пользователем из указанного c диапазона даты. Но это полностью Скрыть вне диапазона дат, как это.

Вместо этого я хотел показать их отключенными, как 29 февраля. Опять же, это было отключено, используя этот API-интерфейс kendo

Здесь лучший вариант - использовать min и max, поскольку он обеспечивает встроенную проверку, но когда мы не можем управлять ими из внешнего CSS ПОТОМУ ЧТО DOM ELEMENT ITSELF не генерирует никаких дат, вместо этого он показывает следующий тег

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

, вот что я делаю в HTML

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

здесь функция Opendatepicker отключена некоторые из дат, основанных на logienss logi c, например, 29 февраля отключено.

Как добиться этого отключенного вида, все еще следуя API минимального и максимального диапазона дат?

Answer 1

Атрибуты

min и max скрывают даты вне диапазона, поэтому для отключения вы можете использовать директиву disabledDates kendo-datepicker

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

TS:

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

Рабочая демонстрационная ссылка

Answer 2

Если вы не нашли никакого решения с атрибутами min и max.

Чтобы достичь желаемого, вы можете использовать API Disable Dates , чтобы отключить каждую четную дату в DatePicker: Документы

Пример:

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;
  }
}