how can I set a datapicker input on angular 2 mate

Question

I've already got the content that is sent by a form

home.component.ts

...

constructor(private route: ActivatedRoute){}

/**
* Get the names OnInit
*/
ngOnInit() {


  this.form= {
    postcode: this.route.snapshot.params['postcode'],
    date_from: this.route.snapshot.params['date_from'],
    date_to: this.route.snapshot.params['date_to']
  }

  console.log( this.form); // {postcode: "WEDSW", date_from: "11/09/2017", date_to: "16/09/2017"}
}

now what I need to do it's to populate it doing something like <input value="{{form.data_from}}"> but it wont work, when I open the datepicker it will show the current day and not the value that has been set in the form object

I'm also getting a value not recognized as a date object by DateAdapter that I think could be solve doing this

home.component.html

 <div>
     <div class="calendar"> 
        <button md-raised-button (click)="pickupDate.open()" class="calendar__ico"></button>
        <button md-raised-button (click)="pickupDate.open()"></button>
    </div>

    <md-form-field>
     <input mdInput [mdDatepicker]="pickupDate">
     <md-datepicker #pickupDate></md-datepicker>
    </md-form-field>
   </div>

   <div>
    <div class="calendar">  
     <button md-raised-button (click)="returnDate.open()"></button>
     <button md-raised-button (click)="returnDate.open()"></button>
   </div>

   <md-form-field>
     <input mdInput [mdDatepicker]="returnDate">
     <md-datepicker #returnDate></md-datepicker>
   </md-form-field>
  </div>

Answer 1

You can bind to [(ngModel)] and set it to the values you get on your form:

template

<md-form-field>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="initialDate">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker></md-datepicker>
</md-form-field>

component

initialDate = new Date(2017,10,30);
//change with your date_from, date_to

Working plunker here

Answer 2

You might get some idea from this snippet from angular material docs https://github.com/angular/material2.

.html

<h2>Result</h2>
<p>
  <md-datepicker-toggle [for]="resultPicker"></md-datepicker-toggle>
  <md-form-field>
    <input mdInput #resultPickerModel="ngModel" [mdDatepicker]="resultPicker" [(ngModel)]="date" placeholder="Pick a date" (dateInput)="onDateInput($event)" (dateChange)="onDateChange($event)">
    <md-datepicker #resultPicker [startAt]="startAt">
    </md-datepicker>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
      "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
    </md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
  </md-form-field>
</p>
<p>Last input: {{lastDateInput}}</p>
<p>Last change: {{lastDateChange}}</p>

.ts

import { MdDatepickerInputEvent } from '@angular/material';

...

  startAt: Date;
  date: Date;
  lastDateInput: Date | null;
  lastDateChange: Date | null;

  onDateInput = (e: MdDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
  onDateChange = (e: MdDatepickerInputEvent<Date>) => this.lastDateChange = e.value;

browser