Angular Material Datepicker:选择日期时更改事件未触发

Question

我正在使用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>

Answer 1

替换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>

Answer 2

<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)
}

在这里检查

Answer 3

selectedChanged在里面使用md-datepicker.

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

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

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

类似的演示

Answer 4

dateChange在文本框中编辑日期和通过日历控件更改日期时，都会引发一个事件。看这里

<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>