Angular Material Datepicker: Change event not firing when selecting date

I'm using Angular and Angular Material's Datepicker. Everything is working fine for the most part, however I added a (change) event that is only working when the user manually types in a date. It does not get triggered when the user clicks on a date from the datepicker popup. To be clear, the value for date does in fact change when the user clicks on a date, it is just the (change) event, and ultimately my updateCalcs() function that for some reason doesn't get triggered. How can I trigger an event when the user clicks on a date from the 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>


3 Answers
3

Use selectedChanged inside md-datepicker.

selectedChanged

md-datepicker

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

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

$event will emit the new value which you can use in your updateCalcs() function.

$event

updateCalcs()

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


Similar demo

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.