代码之家 › 专栏 › 技术社区 › chuckd

使用角度日期管道在表单中格式化ngModel中的日期时间

formatdatetime datetime angular html

0

chuckd · 技术社区 · 6 年前

我把这个放在下面的什么地方 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'}}

我能让它工作的唯一方法是先用'formatDate()'格式化.ts代码中的日期

0 回复 | 直到 6 年前

1

3

Arun Rajagopal 6 年前

我不明白你为什么要在ngModel中格式化它。

您的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

2

0

Zbynek Vrana 6 年前

在Angular 9上,这适用于我,具有双向绑定:

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

3

-1

Spandan 6 年前

Using Pipes within ngModel on INPUT Elements in Angular

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