问题描述
是否可以将 Date 类型的组件属性绑定到类型设置为 datetime-local
的 HTML5 输入?
It is possible to bind a component property of Date type to a HTML5 input with type set to datetime-local
?
在我的组件中,我有一个 poperty:
In my component I have a poperty:
public filterDateFrom: Date;
在我的模板中,我有一个输入定义为:
and in my template I have an input defined as:
<input type="datetime-local" [(ngModel)]="filterDateFrom" />
但绑定不起作用.
推荐答案
您可以使用以下格式绑定到日期:yyyy-MM-ddTHH:mm
,您也可以从 date.toISOString().slice(0,16) 获取
(切片去掉分钟后的时间部分)
You can bind to a date using the following format: yyyy-MM-ddTHH:mm
, which you can also get from date.toISOString().slice(0,16)
(the slice removes the time portion after the minutes).
@Component({
selector: 'app',
template: `<input type="datetime-local" [value]="date"
(change)="date=$event.target.value" /> {{date}}`
})
export class AppComponent {
date: string;
constructor() {
this.date = new Date().toISOString().slice(0, 16);
}
}
请记住,date.toISOString()
将返回与本地时间的日期偏移量.你也可以自己构造日期字符串:
Keep in mind that date.toISOString()
will return a date offset from local time. You can also construct the date string yourself:
private toDateString(date: Date): string {
return (date.getFullYear().toString() + '-'
+ ("0" + (date.getMonth() + 1)).slice(-2) + '-'
+ ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0,5);
}
如果您希望能够将选择绑定到 Date
模型,您可以使用它来构建自定义日期组件:
If you want to be able to bind the select to a Date
model, you can use this to build a custom date component:
@Component({
selector: 'my-date',
events: ['dateChange'],
template: `<input type="datetime-local" [value] = "_date"
(change) = "onDateChange($event.target.value)" />`
})
export class MyDate{
private _date: string;
@Input() set date(d: Date) {
this._date = this.toDateString(d);
}
@Output() dateChange: EventEmitter<Date>;
constructor() {
this.date = new Date();
this.dateChange = new EventEmitter();
}
private toDateString(date: Date): string {
return (date.getFullYear().toString() + '-'
+ ("0" + (date.getMonth() + 1)).slice(-2) + '-'
+ ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0,5);
}
private parseDateString(date:string): Date {
date = date.replace('T','-');
var parts = date.split('-');
var timeParts = parts[3].split(':');
// new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1]-1, parts[2], timeParts[0], timeParts[1]); // Note: months are 0-based
}
private onDateChange(value: string): void {
if (value != this._date) {
var parsedDate = this.parseDateString(value);
// check if date is valid first
if (parsedDate.getTime() != NaN) {
this._date = value;
this.dateChange.emit(parsedDate);
}
}
}
}
您的组件的用户将绑定到具有双向模型绑定的 Date
模型:
Users of your component would bind to a Date
model with two-way model binding:
@Component({
selector: 'my-app',
directives: [MyDate],
template: '<my-date [(date)]="date"></my-date> {{date}}'
})
export class AppComponent {
@Input() date: Date;
constructor() {
this.date = new Date();
}
}
或者,如果您想避免使用自定义标签,请将组件重写为指令:
Or if you want to avoid custom tags, rewrite the component as a directive:
<input type="datetime-local" [(date)]="date" />
这篇关于将类型为 datetime-local 的输入绑定到 Angular 2 中的日期属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!