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的类型设置为字符串并在绑定之前格式化它之前完成此操作？

由于日期时间选择器组件，我无法使用输入类型=日期。

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作为参考

模型绑定后更新输入值

1 个答案: