[英]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 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 现在,我需要做的是使用
<input value="{{form.data_from}}">
类的方法填充它,但是它将无法正常工作,当我打开日期选择器时,它将显示当前日期,而不是已经显示的值。在form
对象中设置
I'm also getting a value not recognized as a date object by DateAdapter
that I think could be solve doing this 我也得到了
value not recognized as a date object by DateAdapter
,我认为可以解决此问题
home.component.html 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 might get some idea from this snippet from angular material docs https://github.com/angular/material2 . 您可能会从角度材料文档https://github.com/angular/material2的此片段中获得一些想法。
.html .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 .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 浏览器
You can bind to [(ngModel)] and set it to the values you get on your form: 您可以绑定到[(ngModel)]并将其设置为在表单上获得的值:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.