在 Angular 中更改日期格式答案

【问题标题】：Change date format in Angular在 Angular 中更改日期格式
【发布时间】：2022-12-07 19:03:16
【问题描述】：

我正在研究角度应用程序，我有一个数组如下：

数据：

[
 {
   "id:"1",
   "date":"2021-06-28T00:00:00.00Z",
   "name":"A"
 },
  {
   "id:"2",
   "date":"2022-06-28T00:00:00.00Z",
   "name":"A"
 },
  {
   "id:"3",
   "date":"2023-06-28T00:00:00.00Z",
   "name":"A"
 }
]

像这样我可能在数组中有 100-200 条记录。在我的 html 中，我的代码如下：

<div *ngFor="let data of data">
{{data.date}}
</div>

我想以以下格式显示日期：“6 月 22 日”、“11 月 23 日”等。如何在运行时将日期转换为所需格式？

【问题讨论】：

标签： html css angular angular14

【解决方案1】：

使用内置的 date 管道：

<div *ngFor="let data of data">
{{data.date | date: 'MMMYY'}}
</div>

https://angular.io/api/common/DatePipe

【讨论】：

它以数字形式给出输出。 6 月是 06。我想要 6 月、10 月、11 月等

【解决方案2】：

我不是经验丰富的 Angular 开发人员，但我已经使用“管道”实现了您的要求。这是Transforming Data Using Pipes的链接。具体来说，您可能会发现使用 DatePipe 会很方便。

例如：（取自上面的链接）

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

我想你可能正在寻找类似的东西：

'mediumDate'    'MMM d, y'  Jun 15, 2015

看看我提供的第一个链接。我希望这可以帮助你。

【讨论】：