【问题标题】:How to use angular2 datepipe in input如何在输入中使用angular2 datepipe
【发布时间】:2020-07-27 15:05:25
【问题描述】:

我有一个来自我的服务器的日期字符串,如下所示。 :

1992-05-26T18:30:00Z

我正在尝试使用日期管道将其格式化为 DD/MM/YYYY 格式并将其绑定到我的输入 ngModel。

var userdate:any = new Date(data.draftData.accountHolder.dateOfBirth);
this.setDob = userdate | date:'MM/DD/YYYY';

它给我一个错误:

ReferenceError: 日期未定义

我的HTML如下

<md-input placeholder="Date of birth" value="mm/dd/yy" [(ngModel)]="setDob"></md-input>

有人可以指出我在这里缺少什么。

【问题讨论】:

    标签: angular


    【解决方案1】:

    管道应该在模板中使用,而不是在代码中。

    <div>{{userdate | date:'MM/DD/YYYY'}}</div>
    

    你也可以在代码中使用它,比如

    var userdate:any = new Date(data.draftData.accountHolder.dateOfBirth);
    var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, 'MM/DD/YYYY');
    

    【讨论】:

    【解决方案2】:

    您可以像 as 一样使用“分离数据绑定”来代替“双向数据绑定”。

    通常情况下我们使用[(ngModel)]="setDob",但在这种情况下你不能使用管道。 “分离数据绑定”将帮助我们使用管道,例如:

    &lt;input [ngModel]="setDob | somePipeMethod" (ngModelChange)="setDob=$event" /&gt;

    【讨论】:

      【解决方案3】:
      let datepipe = new DatePipe('en-US');
      let date = new Date(data.draftData.accountHolder.dateOfBirth);
      let formattedDate = this.datepipe.transform(date,"MM/dd/y HH:MM");
      

      【讨论】:

      • 纯代码答案可能会解决问题,但对其如何解决问题的一些解释将有助于学习了解如何解决未来的问题。
      猜你喜欢
      • 1970-01-01
      • 2023-03-12
      • 2017-06-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-04
      相关资源
      最近更新 更多