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 中的預定義日期格式列表
日期格式 | 結果 |
---|---|
M/d/yy, h:mm a |
12/2/21, 4:38 PM |
MMM d, y, h:mm:ss a |
Dec 2, 2021, 4:39:12 PM |
MMMM d, y, h:mm:ss a z |
December 2, 2021, 4:39:35 PM GMT+5 |
EEEE, MMMM d, y, h:mm:ss a zzzz |
Thursday, December 2, 2021, 4:39:55 PM GMT+05:00 |
M/d/yy |
12/2/21 |
MMM d, y |
Dec 2, 2021 |
MMMM d, y |
December 2, 2021 |
EEEE, MMMM d, y |
Thursday, December 2, 2021 |
h:mm a |
4:42 PM |
h:mm:ss a |
4:43:52 PM |
h:mm:ss a z |
4:44:32 PM GMT+5 |
h:mm:ss a zzzz |
4:45:00 PM GMT+05:00 |
Angular DatePipe
有 12 種預定義格式,如上表所示。但我們也可以建立自定義日期格式幷包含更多元素,如年代、年周、月周、月日等。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn