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

Question

嗨，我正在使用 Kendo Date Picker for Kendo Angular UI. 我正在使用日期选择器的最小和最大属性将用户限制为特定日期范围内的 select。但这完全隐藏了超出范围的日期。

相反，我想将它们显示为已禁用，就像 2 月 29 日已禁用一样。再次使用 this api of kendo

禁用了此功能

这里最好的情况是使用 min 和 max，因为它提供 built-in 验证，但是当我们无法从外部控制它们时 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 日被禁用。

如何在仍然遵循 min-max 日期范围 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

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

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

kendo-ui

kendo-datepicker

angular

kendodaterangepicker