Question

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

(dateChange)="onDateChange($event)

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

现在将日期选择器设置为给定日期-11月18日。如果我在下一个输入字段中需要相同的日期，然后在日期选择器上单击相同的日期，它将保持沉默-事件'dateChange'未触发，因为没有日期更改。但是，我想应用相同的日期而不要切换到另一个日期，而不是回到我想要的/先前已经设置的日期11月18日。

有没有一种方法可以强制datepicker接受同一日期的给定点击？还是一些解决技巧？

Answer 1

这是我为感兴趣的人找到的简单解决方案：

在模板/视图中：

<div #paragraph1>Paragraph1</div>
<div #paragraph2>Paragraph2</div>
<div #paragraph3>Paragraph3</div>

<ul>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph1)">Paragraph1</a></li>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph2)">Paragraph2</a></li>
   <li><a href="javascript:void(0)" (click)="scroll(paragraph2)">Paragraph3</a></li>
</ul>

  scroll(el: HTMLElement) {
    el.scrollIntoView();
  }

在TS中：

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

通过将绑定到datepicker的输入的formControl设置为 undefined ，datepicker不再保存最后选择的值，并且触发dateChange事件。

注意：在这种情况下，可以将输入的formControl值设置为undefined，因为它是隐藏的，并且我将所选日期放置在另一个控件/字段中通过“ onDateChange（）”功能。

多个输入字段的角度材质日期选择器

1 个答案: