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

嗨，我在用 我使用日期选择器的最小和最大属性来限制用户从特定的日期范围中进行选择。但这完全隐藏了像这样的超出范围的日期

取而代之的是，我想让他们看起来像是残疾人，就像2月29日是残疾人一样。再次使用禁用此功能

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

<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的情况下实现此禁用外观

如果您没有找到任何具有

min

和

max

属性的解决方案

要实现所需功能，可以使用禁用日期API禁用日期选择器中的每个偶数日期：

例如：

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
公共价值：日期；
公共禁用日期=（日期：日期）：布尔值=>{
const min=新日期（2019年1月1日）；
const max=新日期（2022年1月1日）；
返回日期<最小日期>最大日期；
}
}

如果您没有找到任何具有

min

和

max

属性的解决方案

要实现所需功能，可以使用禁用日期API禁用日期选择器中的每个偶数日期：

例如：

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
公共价值：日期；
公共禁用日期=（日期：日期）：布尔值=>{
const min=新日期（2019年1月1日）；
const max=新日期（2022年1月1日）；
返回日期<最小日期>最大日期；
}
}

min

和

max

属性隐藏超出范围的日期，因此要禁用，可以使用

剑道日期选择器的指令

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

TS:

public disabledDates=（日期：date）：布尔=>{
返回日期

---

min

和

max

属性隐藏超出范围的日期，因此要禁用，可以使用

剑道日期选择器的指令

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

TS:

public disabledDates=（日期：date）：布尔=>{
返回日期

---

你能展示你的代码吗？嘿，我刚刚用代码更新了问题。你能展示你的代码吗？嘿，我刚刚用代码更新了问题。非常感谢，我正在尝试，它会保留验证吗？（我的意思是禁用键盘输入，虽然这是第二个问题，但我很好奇。）是的，它会抛出验证错误，但不会限制输入，因此您必须手动执行此操作。您可以在我提供的stackblitz链接上检查输入谢谢，我正在尝试此操作，它会保留验证吗？（我的意思是禁用键盘输入，虽然这是第二个问题，但我很好奇。）是的，它会抛出验证错误，但不会限制输入，因此您必须手动执行此操作。您可以通过我提供的stackblitz链接检查输入