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

【问题标题】：How to show past dates as disabled dates in kendo date picker如何在剑道日期选择器中将过去日期显示为禁用日期
【发布时间】：2020-02-25 10:09:28
【问题描述】：

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

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

这里最好的情况是使用 min 和 max，因为它提供了内置验证，但是当我们无法从外部 CSS 控制它们时，因为 DOM ELEMENT 本身没有生成任何日期，而是显示以下标签

<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 的同时实现这种禁用外观？

【问题讨论】：

你能出示你的代码吗？
嘿，我刚刚用代码更新了问题。

标签： angular kendo-ui kendo-datepicker kendodaterangepicker

【解决方案1】：

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

【讨论】：

非常感谢，我正在尝试这个，它会保留验证吗？（我的意思是禁用键盘输入，认为这是次要问题，但我很好奇。）
是的，它会抛出验证错误，但不会限制输入，因此您必须手动执行此操作
你可以在我提供的 stackblitz 链接上检查输入

【解决方案2】：

如果您没有找到任何具有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;
  }
}

【讨论】：