Angular 2 Material Datepicker Value

问题:

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.

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

I tried the [value] field in input but how can I get the date to send it to my backend? Thanks.

回答1:

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

回答2:

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 
>

回答3:

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