CODEWITHSUNDEEP
angulardatepickerangular-material2
hawxs
hawxs

Reputation: 103

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.

Upvotes: 10

Views: 33936

Answers (3)

bresleveloper
bresleveloper

Reputation: 6066

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 
>

Upvotes: 4

hestellezg
hestellezg

Reputation: 3711

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

Upvotes: 3

Nehal
Nehal

Reputation: 13307

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

Upvotes: 14

Related Questions