如何在組件的角度2材質上設置數據選擇器輸入？

Question

我已經有通過表單發送的內容

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

現在，我需要做的是使用<input value="{{form.data_from}}">類的方法填充它，但是它將無法正常工作，當我打開日期選擇器時，它將顯示當前日期，而不是已經顯示的值。在form對象中設置

我也得到了value not recognized as a date object by DateAdapter ，我認為可以解決此問題

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

您可能會從角度材料文檔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;

瀏覽器

Answer 2

您可以綁定到[（ngModel）]並將其設置為在表單上獲得的值：

模板

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

零件

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

在這里工作的家伙