如何捕获 Clarity Date Picker 的变化

Question

我正在使用 clrDate 的双重绑定，它允许我加载 Javascript 日期对象。但是，我需要在每次用户更改日期时触发一个事件，无论是输入新日期还是使用日历。

我试过 (click)、(change)、(ngModelChange)、(blur) - 但出于某种原因 none 似乎触发了它们。

<label for="modelDate" class="clr-control-label" >Model Date:</label>     
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >

我应该如何捕捉日期选择器中的变化？

Answer 1

您可以通过两种方式进行。

双向绑定

在this stackblitz中，注意在日期选择器被交互之前，如果你点击按钮那么date1的值是未定义的。在您 select 一个日期并单击按钮后，它在日期选择器中设置了值。这是 Angular.

中典型的双向绑定

<section>
  <button class="btn btn-primary" (click)="logDate1()">
    Log Date Value for 2-way binding
  </button>
  <label for="date1" class="clr-control-label" > Date1:</label>     
  <input type="date" [(clrDate)]="date1" />
</section>

去糖语法

这可能就是您想要的。它与上面的示例几乎相同，但我们将 2 向绑定分开或 去糖化 ，以便它设置为 [clrDate]=date2。请注意，它触发了一个可以与 logChnage($event) 关联的事件 clrDateChange。只要日期选择器的内部值发生变化（例如用户 selects 一个日期），它就会被触发，你可以用它在 logChange 函数中的值做任何你想做的事情。这是双向绑定 de-sugarized。

<section>
  <h4>De-sugarized syntax</h4>
  <label for="date2" class="clr-control-label" > Date1:</label>     
  <input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>

如何捕获 Clarity Date Picker 的变化

How to capture change of Clarity Date Picker

datepicker

vmware-clarity

angular6

双向绑定

去糖语法