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

问题描述

我已经拿到了表单发送的内容

home.component.ts

<代码>...构造函数(私有路由:ActivatedRoute){}/*** 获取名称 OnInit*/ngOnInit() {this.form= {邮政编码: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);//{邮政编码:WEDSW"，date_from:11/09/2017"，date_to:16/09/2017"}}

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

我也得到一个值未被DateAdapter识别为日期对象我认为这样做可以解决

home.component.html

 
<div class="日历"><button md-raised-button (click)="pickupDate.open()" class="calendar__ico"></button><button md-raised-button (click)="pickupDate.open()"></button>
<md-form-field><input mdInput [mdDatepicker]="pickupDate"><md-datepicker #pickupDate></md-datepicker></md-form-field>

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

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

解决方案

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

模板

<input mdInput [mdDatepicker]="picker" placeholder="选择日期" [(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);//随着你的date_from，date_to改变

工作plunker 这里

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>

解决方案

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

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