Angular 4 mat-datepicker date changed event

Question

I have the following date picker in my app:

<mat-form-field>
<input mdInput
   [matDatepicker]="dp3"
   placeholder="Select Birthday"
   name="birthday"
   disabled>
<mat-datepicker-toggle matSuffix
     [for]="dp3">
</mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false">
</mat-datepicker>
</mat-form-field>

when the page load the birthday value is written in the matInput, but when I change the date via the calendar popup, the date does not change.

I've tried to to bind to (change) event but nothing happens. When I remove the ngModel I can see that the date in the matInput actually changes.

I am using angular 4, this is my package,json:

"dependencies": {
  "@agm/core": "^1.0.0-beta.2",
  "@angular-mdl/core": "^4.0.7",
  "@angular-mdl/datepicker": "0.0.4",
  "@angular-mdl/expansion-panel": "^5.0.0",
  "@angular/animations": "^6.0.3",
  "@angular/cdk": "^5.2.2",
  "@angular/common": "^4.3.2",
  "@angular/compiler": "^4.3.2",
  "@angular/core": "^4.3.2",
  "@angular/flex-layout": "^2.0.0-beta.8",
  "@angular/forms": "^4.3.2",
  "@angular/http": "^4.3.2",
  "@angular/material": "^5.2.5",
  "@angular/platform-browser": "^4.3.2",
  "@angular/platform-browser-dynamic": "^4.3.2",
  "@angular/router": "^4.3.2",
  "@angular2-mdl-ext/expansion-panel": "0.0.1",
  "@angular2-mdl-ext/popover": "^0.6.0",
  "@angular2-mdl-ext/select": "^0.10.3",
  "@cloudinary/angular": "^2.1.1",
  "@cloudinary/angular-4.x": "^1.0.0",
  "@ngrx/core": "^1.2.0",
  "@ngrx/db": "^2.0.2",
  "@ngrx/effects": "^2.0.3",
  "@ngrx/notify": "^1.0.0",
  "@ngrx/router-store": "^1.2.6",
  "@ngrx/store": "^2.2.2",
  "@ngrx/store-devtools": "^3.2.4",
  "angular-2-local-storage": "^1.0.1",
  "angular-star-rating": "^3.0.3",
  "angular2-busy": "^2.0.4",
  "angular2-infinite-scroll": "^0.3.42",
  "angular2-mdl": "^2.13.2",
  "angular2-moment": "^1.8.0",
  "angular2localization": "^1.4.2",
  "moment": "^2.20.1",
  "ngrx-store-freeze": "^0.1.9",
  "ngrx-store-localstorage": "^0.1.8",
  "ngrx-store-logger": "^0.1.8",
  "ngx-chips": "^1.4.5",
  "ngx-infinite-scroll": "^0.5.1",
  "normalizr": "^3.2.3",
  "npm": "^5.3.0",
  "primeng": "^4.1.0-rc.2",
  "reselect": "^3.0.1",
  "rxjs": "^5.4.0",
  "sha.js": "^2.4.11",
  "ts-helpers": "^1.1.2",
  "zone.js": "^0.8.12"
},
"devDependencies": {
  "@angular/cli": "1.2.1",
  "@angular/compiler-cli": "^4.0.0",
  "@angular/language-service": "^4.0
  "node-sass": "^4.7.2",
  "sass-loader": "^6.0.7",
  "style-loader": "^0.20.2",
  "typescript": "~2.3.3",
  "webpack": "^3.11.0"
}

what am I missing?

When you say input field, are you referring to mdl-textfield or <input mdInput >? — Amit Chigadani
I mean <input mdInput >, the mdl is there by accident... tried something else and forgot to erase it. — Erez Konforti

Amit Chigadani Amit Chigadani · Accepted Answer · 2018-07-16T19:20:53

Use matInput instead of mdInput

<input matInput
   [matDatepicker]="dp3"
   placeholder="Select Birthday"
   name="birthday"
   [(ngModel)]="model"
   disabled>

Working DEMO

Angular 4 mat-datepicker date changed event

2 Answers