如何在 material 日历中防止日期早于今天？ (Angular 9)

Question

我为一个项目使用了 Angular Material 日历，并试图阻止选择今天之前的日期，所以我尝试了 [min] 约束，但这并不能解决今天日期的 luxon 创建问题，所以每天，最小日期都会根据好日子移动。

有什么好的方法吗？我把我的日历隔离在这里： https://stackblitz.com/edit/angular-swrr7s?devtoolsheight=33&file=src/app/date-range-picker-overview-example.html

谢谢

Answer 1

在你的 stackblitz 中它不起作用，因为 Date.now() returns 一个带有毫秒数的数字而不是日期对象。如果您将代码更改为：

today = new Date();

关于 luxon - 这可能无法开箱即用，因为只有两个内置日期适配器：MatNativeDateModule 和 MatMomentDateModule。您将必须 create your own DateAdapter 才能与 luxon 一起使用 - 它在日期选择器文档中有很好的记录。你应该能够基于你的那一刻，因为 luxon 似乎从那一刻借来了一点。

Answer 2

以下方法可以解决您的问题：

在 .ts 文件中

//today's date
todayDate:Date = new Date();

在 .html 文件中

  <mat-form-field>
    <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Date" formControlName="date"> 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

如何在 material 日历中防止日期早于今天？ (Angular 9)

How to prevent dates before today in a material Calendar ? (Angular 9)

angular

luxon