Angular Material Datepicker：选择日期时未触发更改事件答案

【问题标题】：Angular Material Datepicker: Change event not firing when selecting dateAngular Material Datepicker：选择日期时未触发更改事件
【发布时间】：2017-07-14 23:11:58
【问题描述】：

我正在使用 Angular 和 Angular Material 的 Datepicker。大多数情况下一切正常，但是我添加了一个 (change) 事件，该事件仅在用户手动输入日期时才有效。当用户单击日期选择器弹出窗口中的日期时，它不会被触发。需要明确的是，date 的值实际上在用户单击日期时会发生变化，它只是 (change) 事件，最终我的 updateCalcs() 函数由于某种原因没有被触发。当用户点击日期选择器中的日期时如何触发事件？

<md-input-container>
    <input mdInput [mdDatepicker]="datePicker" placeholder="Choose Date" name="date" [(ngModel)]="date" (change)="updateCalcs()" required>
    <button mdSuffix [mdDatepickerToggle]="datePicker"></button>
</md-input-container>
<md-datepicker #datePicker></md-datepicker>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在文本框中编辑日期和通过日历控件更改日期时都会引发dateChange 事件。见here

<mat-form-field>
  <input matInput [matDatepicker]="datepicker" required placeholder="Choose a date" (dateChange)="valueChanged()">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>

【讨论】：

这是对我有用的整个解决方案的唯一答案。接受的答案没有。我正在使用 Angular 7>
好吧，如果您启用了操作按钮，这似乎不起作用。

【解决方案2】：

将change 替换为ngModelChange

改变

<input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (change)="updateCalcs()" required>

到

<input mdInput 
       [mdDatepicker]="datePicker" 
       placeholder="Choose Date" 
       name="date" [(ngModel)]="date" 
       (ngModelChange)="updateCalcs()" required>

【讨论】：

谢谢，这对我有用。接受的答案没有。

【解决方案3】：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

还有.ts

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    //console.log(event.value)
}

查看here

【讨论】：

这应该是公认的答案（对于版本> 6.4.7）

【解决方案4】：

在md-datepicker 中使用selectedChanged。

<md-datepicker #datePicker (selectedChanged)="updateCalcs($event)"></md-datepicker>

$event 将发出您可以在updateCalcs() 函数中使用的新值。

updateCalcs(event){
  console.log(event);
}

Similar demo

【讨论】：

您的意思是说 md-datepicker 而不是 md-autocomplete？无论哪种方式，我都可以使用您的更改。

【解决方案5】：

我必须补充一点，(dateInput) 并不总是为我开枪，最终使用了(keyup)

代码 HTML

  <mat-form-field>
        <input #fromInput matInput [matDatepicker]="pickerFrom" placeholder="סנן תאריך התחלה" 
          (dateChange)="filterFrom($event)" (keyup)="filterInputKeyupFrom()">
        <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
        <mat-datepicker #pickerFrom></mat-datepicker>
    </mat-form-field>

最终代码 TS

 private parseInputDate(v):Date{
      //this was a manual change in the input and needs to be parsed
      let a:Array<any> = v.split('.')
      a.forEach((v, i) => a[i] = parseInt(v) + (i == 1 ? -1 : 0))
      console.log(new Date(a[2], a[1], a[0]))
      return  new Date(a[2], a[1], a[0])
  }

  //(dateInput) wasn't always firing for me, ended up using (keyup)
  filterInputKeyupFrom(){
    this.lastFrom = this.parseInputDate(this.fromInput.nativeElement.value)
    if (this.lastFrom) {
      this.lastFrom.setSeconds(-1)
    }
    this.filterDates()
  }

  filterInputKeyupUpTo(){
    this.lastTo = this.parseInputDate(this.toInput.nativeElement.value)
    if (this.lastTo) {
      this.lastTo.setDate(this.lastTo.getDate()+1)
    }
    this.filterDates()
  }

  filterFrom(e:MatDatepickerInputEvent<Date>){
    console.log('filterFrom')
    //changing manually the input and then exit from it fires here
    if(e.value){
      //need to clone the date or changes are applied on the Picker
      this.lastFrom = new Date(e.value)
      if (this.lastFrom) {
        this.lastFrom.setSeconds(-1)
      }
      this.filterDates()
    }
  }

  filterUpTo(e:MatDatepickerInputEvent<Date>){
    console.log('filterUpTo')
    if(e.value){
      this.lastTo = new Date(e.value)
      if (this.lastTo) {
        this.lastTo.setDate(this.lastTo.getDate()+1)
      }
      this.filterDates()
    }
  }

【讨论】：

【解决方案6】：

您可以使用 ng-change 来获取更改后的数据

<md-datepicker ng-change="updateCalcs()"></md-datepicker>

查看Here

【讨论】：