在 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 日期管道的更多資訊，請單擊此處