html - 使用 Angular 日期管道在 ngModel 中格式化日期时间

Question

我在下面有这个birthDate“1938-08-08T00:00:00”，我希望它是“dd/MM/yyyy”，但我似乎无法弄清楚如何在ngModel.

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">

我试过这个没有运气：

[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}

我可以让它工作的唯一方法是，如果我首先使用 Angular 'formatDate()' 格式化 .ts 代码中的日期

Answer 1

我不明白您为什么要在 ngModel 中对其进行格式化。

单向数据绑定（插值 {{}}）在双向数据绑定中不起作用。如果你想使用管道，我会建议使用 value 属性而不是 ngModal。

您的 HTML 应如下所示：

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">

这里是一个活生生的例子。https://stackblitz.com/edit/angular-ubpthb

Answer 2

在 Angular 9 上，这对我有用，有两种方式绑定：

<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>

Answer 3

参考 -在 Angular 的 INPUT 元素上使用 ngModel 中的管道

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">