将类型为datetime-local的输入绑定到Angular 2中的Date属性

可以将Date类型的组件属性绑定到类型设置为datetime-local？的HTML5输入.

在我的组件中,我有一个属性:

public filterDateFrom: Date;

在我的模板中,我有一个输入定义为:

但绑定不起作用.

演示Plnkr

您可以使用以下格式绑定到日期:yyyy-MM-ddTHH:mm,您也可以从中获取date.toISOString().slice(0,16)(切片会删除分钟后的时间部分).

@Component({
    selector: 'app',
    template: ` {{date}}` 
})
export class AppComponent {
    date: string;
    constructor() {
        this.date = new Date().toISOString().slice(0, 16);
    }
}

请记住,这date.toISOString()将从当地时间返回日期偏移量.您也可以自己构造日期字符串:

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);
}

如果您希望能够将select绑定到Date模型,可以使用它来构建自定义日期组件:

@Component({
    selector: 'my-date',
    events: ['dateChange'],
    template: ``
})
export class MyDate{
    private _date: string;
    @Input() set date(d: Date) {
        this._date = this.toDateString(d);
    }
    @Output() dateChange: EventEmitter;
    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双向模型绑定的模型:

@Component({
    selector: 'my-app',
    directives: [MyDate],
    template: '  {{date}}' 
})
export class AppComponent {
    @Input() date: Date;
    constructor() {
        this.date = new Date();
    }
}

或者,如果要避免使用自定义标记,请将该组件重写为指令:

演示Plnkr与指令

现在它的2017年春天,DatePipe是OOTB发货.您可以通过为管道指定格式参数来实现(单向)绑定.例如:

稍微需要注意的是,你必须管理DOM - >模型方面来处理客户端对控件的更改(除非我遗漏了一些东西!),但这种方式似乎更清晰.

更新

看起来我确实错过了什么!

添加ngModelChange到上面应该提供DOM - >双向绑定过程的模型端: