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

Question

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

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

谢谢

Answer 1

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

verbose 0.845938752 Request "https://gitlab.trustify.dev/api/v4/packages/npm/@trustifych%2freview-importer" finished with status code 200.
[...]
verbose 2.567404115 Performing "GET" request to "https://gitlab.myorg.com/api/v4/projects/8/packages/npm/@myorg/mypackage/-/@myorg/mypackage-1.0.1.tgz".
verbose 2.669180133 Error: https://gitlab.myorg.com/api/v4/projects/8/packages/npm/@myorg/mypackage/-/@myorg/mypackage-1.0.1.tgz: Request failed "404 Not Found"
    at ResponseError.ExtendableBuiltin (/usr/local/lib/node_modules/yarn/lib/cli.js:696:66)
    at new ResponseError (/usr/local/lib/node_modules/yarn/lib/cli.js:802:124)
    at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:67058:16)
    at Request.emit (events.js:315:20)
    at Request.module.exports.Request.onRequestResponse (/usr/local/lib/node_modules/yarn/lib/cli.js:141539:10)
    at ClientRequest.emit (events.js:315:20)
    at HTTPParser.parserOnIncomingClient (_http_client.js:641:27)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
    at TLSSocket.socketOnData (_http_client.js:509:22)
    at TLSSocket.emit (events.js:315:20)
error An unexpected error occurred: "https://gitlab.myorg.com/api/v4/projects/8/packages/npm/@myorg/mypackage/-/@myorg/mypackage-1.0.1.tgz: Request failed \"404 Not Found\"".

关于 luxon - 这可能无法开箱即用，因为只有两个内置日期适配器：today = new Date(); 和 MatNativeDateModule 。您必须 create your own DateAdapter 才能与 luxon 一起使用 - 它在 datepicker 文档中有很好的记录。你应该能够基于你的时刻，因为 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>