Wie kann ich eine Datenpickereingabe für Material mit Winkel 2 von einer Komponente aus vornehmen?

Question

Ich habe schon den Inhalt, die

durch ein Formular gesendet wird

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

jetzt, was ich es tun müssen, zu füllen, es ist so etwas wie <input value="{{form.data_from}}"> tun, aber es wird nicht funktionieren, wenn ich die Datepicker picker~~POS=HEADCOMP öffnet es den aktuellen Tag zeigen und nicht den Wert, der in dem form Objekt

ich bin auch ein value not recognized as a date object by DateAdaptergesetzt wurde immer 0, die ich denken könnte sein, diese könnten Sie eine Vorstellung von diesem Ausschnitt aus Winkelmaterial docs bekommen https://github.com/angular/material2

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

lösen zu tun.

.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

Answer 2

können Sie binden an [(ngModel)] und es auf die Werte auf dem Formular erhalten:

Vorlage

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

Komponente

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

Arbeiten Plunker here