模型绑定后更新输入值

Question

我有一个文本输入双向绑定到 Date 类型模型属性：

<input type="text" [(ngModel)]="model.DateStart" ngControl="dateStart" id="dateStart" #dateStart />

model.DateStart（日期时间类型）值是这样的：

2016-05-24T13:49:40.4367997+03:00

我想这样显示：

24.05.2016

我在构造函数中填充模型数据，并在绑定模型后使用 jQuery 更新输入值：

Observable.forkJoin(
                ..
        ).subscribe(
            results => {
                this.model = results[0];

                let element: any = $(input);
                element.bootstrapMaterialDatePicker();
                element.val("24.05.2016");
                console.log(element.val()) // displays "24.05.2016"
            },

问题是，当页面加载时，文本框显示2016-05-24T13:49:40.4367997+03:00。

之后我的自定义格式似乎被覆盖了。有没有办法在不将model.DateStart 的类型设置为字符串并在绑定之前对其进行格式化的情况下完成此操作？

由于日期时间选择器组件，我无法使用 input type=date。

Answer 1

试试这个： 创建一个自定义管道，它将您的日期作为参数并返回您想要的格式，即

import {Pipe} from "angular2/core";

@Pipe({
    name : "formatDate"
})

export class FormatDatePipe{
    transform(value){
        var date_data = new Date(value);

        var yyyy = date_data.getFullYear().toString();
        var mm = (date_data.getMonth()+1).toString(); // getMonth() is zero-based
        var dd  = date_data.getDate().toString();

        return yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]); // returns 2016-05-16
    }
}

然后在你的显示元素中做：

{{modal.DateStart|formatDate}} 

希望您了解如何编写自定义管道；如果没有，请使用this 参考