Angular 2 Material Datepicker Value

9
votes

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.

3
angulardatepickerangular-material2
Put in input: ngModel if you're using Template forms or formControl/formControlName for Model Driven.. – developer033
I can user the min field correctly, but not the value field. Adding ngModel does not help – hawxs
Putting ngModel you can see the value of field in component. – developer033

3 Answers

12
votes

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

4
votes

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 
>
2
votes

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