Angular 12中kendo-datepicker组件如何禁用过去的日期

修正现有代码问题 #

你的现有代码存在两个需要调整的点：

• 属性绑定错误：[disabled]是用来禁用整个日期选择器组件的，控制禁用指定日期需要使用专门的[disabledDates]属性
• 函数绑定错误：不要给disabledDates绑定的函数加()调用，直接传入函数引用即可，否则会频繁触发变更检测导致性能问题

完整实现代码 #

模板代码 #

<kendo-datepicker [(value)]="oneTime.startDate" [disabledDates]="disablePastDates">
</kendo-datepicker>

组件逻辑代码 #

// 组件类中定义判断函数
public disablePastDates = (date: Date): boolean => {
  // 先获取今天0点0分0秒的时间，避免当天因时分秒差异被误判
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  // 日期小于今天则返回true（禁用），否则返回false（可用）
  return date < today;
}

可选调整 #

如果需要连当天也一起禁用，只需把判断条件修改为return date <= today;即可。

内容的提问来源于stack exchange，提问作者user3194721