Angular 2 Material Datepicker Value

Question

I want to use Angular Material Datepicker to get a date into my page. I use this code, but cannot figure out how to access the selected value correctly.

Answer 1

as stated in the docs there are 2 events (dateChange) and (dateInput) that can be used if you prefer. the $event has 3 props, target is the MatDatepickerInput, targetElement for the native HTML Element, and value which is the Date object.

<input matInput [matDatepicker]="pickerFrom" placeholder="From" 
      (dateChange)="changeFunc($event)"      <<---- you can send $event
      (dateChange)="dateInput($event.value)" <<---- or just $event.value 
>

Answer 2

As Nehal said, you can use the [(ngModel)] binding; I also forgot the "name" atribute:

  <md-form-field>
    <input mdInput [(ngModel)]="myDateValue" name="myDate"
      [mdDatepicker]="picker" placeholder="Select a date">

Answer 3

You can access the datepicker value by using ngModel. The ngModel needs to be in the input tag. See the Plunker demo.