如何在材料日历中防止今天之前的日期？（角度 9）答案

【问题标题】：How to prevent dates before today in a material Calendar ? (Angular 9)如何在材料日历中防止今天之前的日期？（角度 9）
【发布时间】：2021-07-11 12:49:23
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： angular luxon

【解决方案1】：

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

today = new Date();

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

【讨论】：

谢谢。我听说 moment 被放弃并寻找信息，luxon 似乎是 moment 的继承者（因为它是创建 luxon 的维护者之一）。我必须看看什么是 DateAdapter 才能完全理解你的意思。
快速搜索 - 似乎有一个公共要点 here。希望我能提供更多帮助，但我仍然对 moment.js 感到满意 :)

【解决方案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>

【讨论】：

谢谢。我是如此接近，但到目前为止，你让我完成了差距。非常感谢。