使用 Angular 日期管道格式化 ngModel 中的日期时间

Question

I have this below where birthDate is "1938-08-08T00:00:00" and I want it to be "dd/MM/yyyy", but I can't seem to figure out how to use the Angular date pipe in ngModel .

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

I tried this with no luck:

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

The only way I can get it to work is if I format the date in the .ts code first with Angular 'formatDate()'

Answer 1

I don't understand why you want to format it inside a ngModel.

One way data binding (Interpolation {{}})doesn't work inside a two way databinding. If you want to use pipe, I would instead suggest to use a value attribute instead of ngModal.

Your HTML should look like:

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

Here is a live example for the same. 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

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

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