Angular 中的日期格式

1. Angular 中的日期管道
2. Angular 日期管道示例
3. Angular 中的預定義日期格式列表

我們將介紹如何使用、更改或新增元素，並使用 Angular 中的 DatePipe 以日期格式顯示 timezone 中的日期。

Angular 中的日期管道

Angular 日期管道用於根據提供的日期格式、時區和國家/地區資訊在 Angular 中格式化日期。

使用 DatePipe，我們可以根據給定的預定義 Angular 日期格式或自定義 Angular 日期格式輕鬆轉換日期物件、數字或 ISO 日期字串。

Angular DatePipe 接受三個引數：format、timezone 和 locale。

format

我們可以在格式引數中傳遞預定義的日期格式或自定義的日期格式。

timezone

在 timezone 引數中，預設時區是使用者機器的本地系統時區。我們可以通過傳遞時區 offset (‘0510’) 或標準 UTC/GMT (CET) 或美國大陸時區縮寫來更改時區，它是一個可選引數。

locale

locale 表示要使用的語言環境格式規則。如果設定或未定義，語言環境的預設值是我們的專案語言環境 (en_US)。語言環境是一個可選引數。

Angular 日期管道示例

我們將討論一些具有不同日期格式的示例，以更好地理解 Angular DatePipe。

首先，我們將在我們的 app.component.ts 中新增此程式碼。

#angular

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  today: Date = new Date();
  pipe = new DatePipe('en-US');
  todayWithPipe = null;
  ngOnInit(): void {
    this.todayWithPipe = this.pipe.transform(Date.now(), 'dd/MM/yyyy');
  }
}

我們在上面的程式碼中從@angular/common 匯入了 DatePipe。我們匯出了一個在 Initial 上實現的類 AppComponent，在其中我們建立了一個具有 en-US 語言環境的新 DatePipe。

我們將向 app.component.html 新增程式碼，以使用我們預定義的日期格式 dd/MM/yyyy 顯示日期。

<div>Today Date is: {{ todayWithPipe }}</div>

輸出：

Angular 中的預定義日期格式列表

Angular DatePipe 有 12 種預定義格式，如上表所示。但我們也可以建立自定義日期格式幷包含更多元素，如年代、年周、月周、月日等。