用于多个输入字段的 Angular Material 日期选择器答案

【问题标题】：Angular Material datepicker for multiple input fields用于多个输入字段的 Angular Material 日期选择器
【发布时间】：2020-03-14 07:54:33
【问题描述】：

我有一个包含多个输入日期的文本框输入的表单。我正在使用 Angular Material datepicker 的单个实例，并通过 TS 代码将其值应用于字段。

(dateChange)="onDateChange($event)

如果我选择一个日期，例如：11 月 18 日，它将被输入到指定的字段中。来自参数的值：$event。

现在日期选择器设置为给定的日期 - 11 月 18 日。如果我在下一个输入字段中需要相同的日期，并在日期选择器上单击相同的日期，它会保持沉默 - 事件“dateChange”未触发，因为没有发生日期更改。但是，我想申请相同的日期，而不是转到另一个日期，而不是回到我想要的/之前已经设置的日期 11 月 18 日。

有没有一种方法可以强制 datepicker 接受在同一日期的给定点击？或者一些变通的技巧？

【问题讨论】：

标签： angular datepicker

【解决方案1】：

这是我为感兴趣的人想出的一个简单解决方案：

在模板/视图中：

<input matInput [matDatepicker]="picker" 
                [formControl]="datePickerCfg.formControlDate"  // <<<---
                (dateChange)="onDateChange($event)">
<mat-datepicker #picker></mat-datepicker>

在 TS 中：

onDateChange($event) {
    ...
    this.datePickerCfg.formControlDate.setValue(undefined);     // <<<---
}

通过将绑定到 datepicker 的 input 的 formControl 设置为 undefined，datepicker 将不再保存上次选择的值并触发 dateChange 事件。

注意：在这种情况下，可以将输入 formControl 值设置为未定义，因为它是隐藏的，我将选定的日期放置到另一个控件/字段通过 'onDateChange()' 函数。

【讨论】：