Formatting Dates with Angular Date Pipe

Angular Date Pipe allows us to format dates in Angular using the requested format, time zone & local information. It comes with built-in pre-defined formats. We can also customize the date format by creating custom format strings. We can set the time zone, country locale, etc. This tutorial shows how to use Date Pipe using examples.

Using Date Pipe

The Date uses the pipe operator i.e |. Specify the date_expression, which you want to format in the left side of the |. On the right side specify date followed by the arguments. It accepts three arguments format, timezone & locale

Date Pipe Example

The following is the example of a date pipe it its simplest form.

Date Pipe Example
Date Pipe Example

Date Expression

The Date Expression can be anything that evaluates to date. For example it can be a Date object, a number (milliseconds since UTC epoch), or an ISO string

Parameters to Date Pipe

The Date pipe accepts three arguments format, timezone & locale

ParameterData TypeParticulars
formatstringThere are two types of format.
1. predefined formats
2. Custom format string

Default: mediumDate.
timezonestringUse
  • A timezone offset (such as '+0430')
  • Standard UTC/GMT
  • continental timezone abbreviation.
Default: End-users local system timezone
localestringA locale code for the locale format rules to use.
Default: The value of LOCALE_ID ( which is en-US)
How to Change LOCALE_ID

Date Format

There are two types formats options available

  1. Pre defined Format
  2. Custom Format string

Pre defined formats

The following are the Pre defined formats that you can use. We have also mentioned the corresponding custom formats next to it.

FormatEquivalent Custom FormatExampleResult
short'M/d/yy, h:mm a'{{toDate | date:'short'}}5/24/20, 3:40 PM
medium'MMM d, y, h:mm:ss a'{{toDate | date:'medium'}}May 24, 2020, 3:42:17 PM
long'MMMM d, y, h:mm:ss a z'{{toDate | date:'long'}}May 24, 2020 at 3:42:17 PM GMT+5
full'EEEE, MMMM d, y, h:mm:ss a zzzz'{{toDate | date:'full'}}Sunday, May 24, 2020 at 3:42:17 PM GMT+05:30
shortDate'M/d/yy'{{toDate | date:'shortDate'}}5/24/20
mediumDate'MMM d, y'{{toDate | date:'mediumDate'}}May 24, 2020
longDate'MMMM d, y'{{toDate | date:'longDate'}}May 24, 2020
fullDate'EEEE, MMMM d, y'{{toDate | date:'fullDate'}}Sunday, May 24, 2020
shortTime'h:mm a'{{toDate | date:'shortTime'}}3:42 PM
mediumTime'h:mm:ss a'{{toDate | date:'mediumTime'}}3:42:17 PM
longTime'h:mm:ss a z'{{toDate | date:'longTime'}}3:42:17 PM GMT+5
fullTime'h:mm:ss a zzzz'{{toDate | date:'fullTime'}}3:42:17 PM GMT+05:30

Custom Format string

The following is the complete list of custom formats that are available

Field typeFormatDescriptionExample Value
EraG, GG & GGGAbbreviatedAD
GGGGWideAnno Domini
GGGGGNarrowA
YearyNumeric: minimum digits2, 20, 201, 2017, 20173
yyumeric: 2 digits + zero padded02, 20, 01, 17, 73
yyyNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
yyyyNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
MonthMNumeric: 1 digit9, 12
MMNumeric: 2 digits + zero padded09, 12
MMMAbbreviatedSep
MMMMWideSeptember
MMMMMNarrowS
Month standaloneLNumeric: 1 digit9, 12
LLNumeric: 2 digits + zero padded09, 12
LLLAbbreviatedSep
LLLLWideSeptember
LLLLLNarrowS
Week of yearwNumeric: minimum digits1... 53
wwNumeric: 2 digits + zero padded01... 53
Week of monthWNumeric: 1 digit1... 5
Day of monthdNumeric: minimum digits1
ddNumeric: 2 digits + zero padded01
Week dayE, EE & EEEAbbreviatedTue
EEEEWideTuesday
EEEEENarrowT
EEEEEEShortTu
Perioda, aa & aaaAbbreviatedam/pm or AM/PM
aaaaWide (fallback to a when missing)ante meridiem/post meridiem
aaaaaNarrowa/p
Period*B, BB & BBBAbbreviatedmid
BBBBWideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBBNarrowmd.
Period standalone*b, bb & bbbAbbreviatedmid.
bbbbWideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbbNarrowmd
Hour 1-12hNumeric: minimum digits1, 12
hhNumeric: 2 digits + zero padded01, 12
Hour 0-23HNumeric: minimum digits0, 23
HHNumeric: 2 digits + zero padded00, 23
MinutemNumeric: minimum digits8, 59
mmNumeric: 2 digits + zero padded08, 59
SecondsNumeric: minimum digits0... 59
ssNumeric: 2 digits + zero padded00... 59
Fractional secondsSNumeric: 1 digit0... 9
SSNumeric: 2 digits + zero padded00... 99
SSSNumeric: 3 digits + zero padded (= milliseconds)000... 999
Zonez, zz & zzzShort specific non location format (fallback to O)GMT-8
zzzzLong specific non location format (fallback to OOOO)GMT-08:00
Z, ZZ & ZZZISO8601 basic format-0800
ZZZZLong localized GMT formatGMT-8:00
ZZZZZISO8601 extended format + Z indicator for offset 0 (= XXXXX)-08:00
O, OO & OOOShort localized GMT formatGMT-8
OOOOLong localized GMT formatGMT-08:00

Custom Format example

Timezone Example

The following examples, shows how to use time zones

Country Locale Example

The Country Locale is the third argument.

References

  1. Angular Date Pipe
  2. Local_ID
  3. ISO string
  4. format_date.ts
  5. date_pipe.ts

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top