Angular Material Datepicker: Change event not firing when selecting date
There's a dateChange
event that's raised both when the date is edited in the text box and when the date is changed via the calendar control.
See 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>
Replace change
with ngModelChange
Change from
<input mdInput
[mdDatepicker]="datePicker"
placeholder="Choose Date"
name="date" [(ngModel)]="date"
(change)="updateCalcs()" required>
To
<input mdInput
[mdDatepicker]="datePicker"
placeholder="Choose Date"
name="date" [(ngModel)]="date"
(ngModelChange)="updateCalcs()" required>
<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>
And .ts
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
//console.log(event.value)
}
Check here