将类型为 datetime-local 的输入绑定到 Angular 2 中的日期属性 [英] Bind an input with type datetime-local to a Date property in Angular 2

问题描述

是否可以将 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" />

但绑定不起作用.

推荐答案

Demo Plnkr

您可以使用以下格式绑定到日期: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" />

带指令的演示 Plnkr

这篇关于将类型为 datetime-local 的输入绑定到 Angular 2 中的日期属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！