如何使用 Angular 2+ 反应形式禁用日历中的未来日期

Question

我正在处理日历。我想将最大日期设置为今天并禁用未来日期。

HTML

 <div [ngClass]="setClassDOB()">
 <input type="date" formControlName="dob" name="dob">
 </div>

组件端（TS）应该怎么办？

Answer 1

在您的 ts 文件中定义下一个函数：

getToday(): string {
   return new Date().toISOString().split('T')[0]
}

并在 html 中绑定 max 如下

<input type="date" formControlName="dob" name="dob" [max]="getToday()">

如果您想禁用过去的日期并显示今天日期的日历，则只需将 [max] 更改为 min [min]...它会起作用

How to disable future dates in calendar using Angular 2+ reactive form