在 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 中,你可以建立自己的日期格式。以下是所有可能的自定義日期格式的完整列表。
型別 | 格式 | 描述 | 例子 |
---|---|---|---|
Era: | G , GG & GGG |
Abbreviated | AD |
GGGG |
Wide | Anno Domini |
|
GGGGG |
Narrow | A |
|
Year: | y |
Numeric: minimum digits | 2022 |
yy |
Numeric: 2 digits and zero padded | 22 |
|
yyy |
Numeric: 3 digits and zero padded | 2022 |
|
yyyy |
Numeric: 4 digits or more and zero padded | 2022 |
|
Month | M |
Numeric: 1 digit | 1 |
MM |
Numeric: 2 digits and zero padded | 01 |
|
MMM |
Abbreviated | Jan |
|
MMMM |
Wide | January |
|
MMMMM |
Narrow | J |
|
Month standalone | L |
Numeric: 1 digit | 8 |
LL |
Numeric: 2 digits + zero padded | 08 |
|
LLL |
Abbreviated | Aug |
|
LLLL |
Wide | August |
|
LLLLL |
Narrow | A |
|
Day of month: | d |
Numeric: minimum digits | 7,8 |
dd |
Numeric: 2 digits + zero padded | 13,08,19 |
|
Week day | E , EE & EEE |
Abbreviated | Thu |
EEEE |
Wide | Thursday |
|
EEEEE |
Narrow | T |
|
EEEEEE |
Short | Th |
|
Week of month | W |
Numeric: 1 digit | 2,6 |
Week of year | w |
Numeric: minimum digits | 7,34 |
ww |
Numeric: 2 digits | 43, 09 |
|
Period | a , aa & aaa |
Abbreviated | am , pm |
aaaa |
Wide | pm |
|
aaaaa |
Narrow | a |
|
Period* | B , BB & BBB |
Abbreviated | mid |
BBBB |
Wide | am , pm , midnight , afternoon , noon |
|
BBBBB |
Narrow | md |
|
Period standalone* | b , bb & bbb |
Abbreviated | mid |
bbbb |
Wide | midnight , afternoon , evening , night |
|
bbbbb |
Narrow | mid |
|
Fractional seconds | S |
Numeric: 1 digit | 5,7,2 |
SS |
Numeric: 2 digits and zero padded | 96,87,47 |
|
SSS |
Numeric: 3 digits and zero padded | 435,789,670 |
|
Second | s |
Numeric: minimum digits | 3,9,56 |
ss |
Numeric: 2 digits and zero padded | 09,26,13 |
|
Minute | m |
Numeric: minimum digits | 40,6,47,54 |
mm |
Numeric: 2 digits and zero padded | 04,51,23,28 |
|
Hour 0 to 23 | H |
Numeric: minimum digits | 16 |
HH |
Numeric: 2 digits and zero padded | 21,19,17 |
|
Hour 1 to 12 | h |
Numeric: minimum digits | 11 |
hh |
Numeric: 2 digits and zero padded | 12 |
|
Zone | z , zz & zzz |
Short specific non location format | GMT-6 |
zzzz |
Long specific non location format | GMT-06:00 |
|
Z , ZZ & ZZZ |
ISO8601 basic format | -0600 |
|
ZZZZ |
Long localized GMT format | GMT-06:00 |
|
ZZZZZ |
ISO8601 extended format | -06:00 |
|
O , OO & OOO |
Short localized GMT format | GMT-6 |
|
OOOO |
Long localized GMT format | GMT -06:00 |
|
自定義格式示例:
在這裡,我們提到了一個非常簡單的自定義格式示例。
{{todayDate | date:'dd/MM/yy HH:mm'}}
輸出:
05/01/22 17:25
如果你想了解有關 Angular 日期管道的更多資訊,請單擊此處
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook