如何在剑道日期选择器中将过去的日期显示为禁用日期

Question

嗨，我正在使用Kendo Date Picker for Kendo Angular UI. 我正在使用日期选择器的min和max属性来限制用户从特定日期范围中进行选择。但这完全隐藏了这样的日期范围。

相反，我想将其显示为已禁用，就像2月29日被禁用一样。再次使用this api of 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函数基于企业逻辑禁用了某些日期，例如，2月29日被禁用。

在仍然遵循最小-最大日期范围API的情况下如何实现这种外观残缺？

Answer 1

如果找不到具有min和max属性的解决方案。

要实现所需的功能，可以使用 Disable Dates （禁用日期） API禁用DatePicker中的每个偶数日期：Docs

示例：

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

Answer 2

min和max属性将日期隐藏在范围之外，因此要禁用，可以使用kendo-datepicker

的disabledDates指令

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

TS：

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

Working Demo link