如何在组件的角度2材质上设置数据选择器输入? [英] how can I set a datapicker input on angular 2 material from a component?

问题描述

我已经有通过表单发送的内容

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

现在我需要做的是填充它 做类似<input value="{{form.data_from}}">的操作，但是它不起作用，当我打开日期选择器时，它将显示当前日期，而不是在form对象中设置的值

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

我也得到了value not recognized as a date object by DateAdapter 我认为可以解决这个问题

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>

推荐答案

您可以绑定到[[ngModel)]并将其设置为在表单上获得的值:

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

模板

<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

正在工作的随便听音乐的人此处

Working plunker here

这篇关于如何在组件的角度2材质上设置数据选择器输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！