在 Angular 中使用管道格式化日期

1. 如何使用 Angular 日期管道
2. 使用 Angular 日期管道的时区示例
3. 具有国家/地区位置的 Angular 日期管道示例
4. 在 Angular 中创建自定义日期管道：

Angular Date Pipe 允许我们使用指定的格式、时区和特定细节来格式化 Angular 中的日期。它具有预定义的格式和自定义格式字符串。在自定义格式字符串中，我们可以轻松自定义日期格式、时区、国家地区等；在一些基本步骤的帮助下，我们将详细讨论所有这些步骤。本文将消除你的所有疑虑，并通过示例演示在 Angular 中使用管道格式化日期。让我们开始。

如何使用 Angular 日期管道

@angular/common 组件引入了日期管道。管道可用于在 Angular 中格式化数据，包括值、百分比、日期等等。在设计 Angular 日期管时，主要考虑三个参数。

• Format
• Time zone
• Locale

在讨论上述参数之前，有必要通过使用格式、时区和语言环境来了解 Angular 日期管道的语法。

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Angular 日期管参数及说明

Format：作为格式参数，我们可以给出标准的 Angular 日期格式或自定义日期格式。mediumDate 是默认值。

Time zone：标准时区是用户机器的本地系统时区。我们可以提供时区偏移量 (0530)、传统的 UTC/GMT (IST) 或美国东部时区首字母缩写词作为附加参数来调整时区。

Locale：表示应该使用的语言环境格式规则。如果未定义或配置，默认值是我们的项目语言环境（en-US）。

此外，你需要知道 Angular 仅附带开箱即用的 en-US 语言环境数据。你必须导入相关的语言环境数据才能以任何语言本地化日期。

Angular 中所有预定义日期格式的列表

Angular 日期管道有 12 种预定义格式。让我们详细讨论所有这些内置日期格式的列表。

• short: M/d/yy, h:mm a, 1/01/22, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'short'}}
• medium: MMM d, y, h:mm:ss a, Jan 01, 2022, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'medium'}}
• long: MMMM d, y, h:mm:ss a z, Jan 01, 2022 at 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'long'}}
• longDate: MMMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'longDate'}}
• fullDate: EEEE, MMMM d, y, Saturday, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'fullDate'}}
• shortTime: h:mm a, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'shortTime'}}
• mediumTime: h:mm:ss a, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'mediumTime'}}
• longTime: h:mm:ss a z, 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'longTime'}}
• fullTime: h:mm:ss a zzzz, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'fullTime'}}
• full: EEEE, MMMM d, y, h:mm:ss a zzzz, Saturday, Jan 01, 2021 at 11:45:13 PM GMT+05:30. Its Angular datepipe code is {{todayDate | date:'full'}}
• shortDate: M/d/yy, 1/01/22. Its Angular datepipe code is {{todayDate | date:'shortDate'}}
• mediumDate: MMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'mediumDate'}}

单击此处查看日期和时间的格式以进一步说明。

使用 Angular 日期管道的时区示例

我们可以将时区作为参数提供给日期管道和日期格式，以在特定 UTC 中显示日期。时区偏差 (‘0530’)、传统 UTC/GMT (IST) 或美国大陆时区首字母缩写词都是时区参数的选项。
例如，显示 IST 时区的时间。

Today is {{todayDate | date:'short':'IST'}}

Today is {{todayDate | date:'short':'+05:00'}} 

输出：

Today is 1/02/19, 3:30 PM 

具有国家/地区位置的 Angular 日期管道示例

必须将国家/地区设置代码作为 Angular 日期管道的第三个参数，以根据国家/地区设置格式标准显示日期，如下所示。

例如，德国使用德国标准时间并且时区偏移量为+01:00。使用语言环境代码 de 作为 Angular 中的参数以在德国语言环境中显示日期和时间，如下所示。

<p>The current German date time is  {{todayDate | date:'full':'+01:00':'de'}}</p>

输出：

The current German date time is Mittwoch, 5. Januar 2022 um 12:50:38 GMT+01:00

在 Angular 中创建自定义日期管道：

Angular 默认使用 mediumDate 日期格式。如果我们想改变它并使用我们自己独特的格式而不是内置格式，例如 MMM d, y, h:mm: ss a 怎么办？

这将时间显示为 January 01, 2022, 11:45:13 PM。

我们将在 Angular 应用程序中大量显示日期，并且每次都需要传递格式参数。如下所示，我们可以创建自定义日期管道并在整个应用程序中使用它来规避这种情况。

{{ todayDate | customDate }}

输出：

January 01, 2022, 11:45:13 PM

按照以下说明制作自定义日期管道。将以下代码添加到名为 custom.datepipe.ts 的文件中。

import { Pipe, PipeTransform } from '@angular/core';

  import { DatePipe } from '@angular/common';  

  @Pipe({

   name: 'customDate'

  })

  export class CustomDatePipe extends 

 DatePipe implements PipeTransform {

   transform(value: any, args?: any): any {
 return super.transform(value, " MMM d, y, h:mm:ss a ");   } }

完成此操作后，下一步是导入 CustomDatePipe 并将其添加到 AppModule 声明数组中。

 import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

现在，我们处于可以在组件文件中使用自定义日期管道的阶段。

{{todayDate | customDate}}

输出：

Jan 5, 2022, 5:25:36 PM

自定义日期格式：

在 Angular 中，你可以创建自己的日期格式。以下是所有可能的自定义日期格式的完整列表。

自定义格式示例：

在这里，我们提到了一个非常简单的自定义格式示例。

{{todayDate | date:'dd/MM/yy HH:mm'}}     

输出：

05/01/22 17:25

如果你想了解有关 Angular 日期管道的更多信息，请单击此处