Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

datepicker: (change) event does not work in mdInput

See original GitHub issue

Bug

change event does not work

<md-input-container>
    <input mdInput [mdDatepicker]="picker" (change)="doSomething($event)">
     <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

What is the expected behavior?

change event must work

What is the current behavior?

when choose a date from datepicker no (change) event is triggered

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.1.2 & material 2.0.0-beta.5

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:32 (5 by maintainers)

Top GitHub Comments

35reactions

willshowellcommented, May 23, 2017

@da45 @mohi86 For now, you can split out the [(ngModel)] like this

<input [ngModel]="myDate" (ngModelChange)="updateMyDate($event)">

updateMyDate(newDate) {
  this.myDate = newDate;
  this.runOtherCalculations(newDate);
}

https://plnkr.co/edit/aZKLaA5qlZj71AqD5ZFz?p=preview

9reactions

gtzinoscommented, May 29, 2017

Hello guys,

@mohi86 mentioned that he used (selectedChange) event but it doesn’t work, me too. In the latest material 2 release, you can use (selectedChanged) instead of (selectedChange).

<md-datepicker #picker (selectedChanged)=“update($event)”>

Close this issue, now it works.

Top Results From Across the Web

Angular Material Datepicker: Change event ... - Stack Overflow

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

Change event not firing when selecting date-angular.js

[Solved]-Angular Material Datepicker: Change event not firing when ... $event will emit the new value which you can use in your updateCalcs() function....

Directives > mdDatepicker - AngularJS Material

Parameter Type Description ng‑change expression expression Expression evaluated when the model value changes. ng‑disabled boolean boolean Whether the datepicker is disabled. ng‑required boolean boolean Whether a...

Angular Material Datepicker: Change Event Not ... - ADocLib

Angular Material Datepicker: Change Event Not Firing When Selecting Date ... Bug. change event does not work <md-input-container> <input mdInput ...

How to use Bootstrap Datepicker to get date on change event

Bootstrap Datepicker is an open-source repository that provides an API to integrate date time picker into the frontend of the website. One ...