Sabari M Sabari M
Updated date Oct 12, 2021
In this blog, we will discuss how to format dates in Angular using a date pipe. We have pre-defined date formats in Angular, so we will see briefly in this blog.

 Angular date pipe is an inbuilt pipe that can be used to format date and time in angular according to given date formats, timezone, and country locale information. When we use DatePipe, We can easily convert the Date object, a number (milliseconds from UTC), or an ISO date string format according to given predefined angular date formats or custom angular date formats.

Syntax:

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Angular accepts below 3 parameters, 

Parameter Descriptions
format

Optional. Default is 'mediumDate'.

timezone

Optional. Default is undefined.

locale

Optional. Default is undefined.

Angular DateTime Formats:

Type Format Description Sample
Era G, GG & GGG Abbreviated AD
  GGGG Wide Anno Domini
  GGGGG Narrow A
Year y Numeric: minimum digits 2021
  yy Numeric: 2 digits + zero-padded 05, 21
  yyy Numeric: 3 digits + zero-padded 005, 021
  yyyy Numeric: 4 digits or more + zero-padded 0005, 2021
Week-numbering year Y Numeric: minimum digits 2021
  YY Numeric: 2 digits + zero-padded 05, 21
  YYY Numeric: 3 digits + zero-padded 005, 021
  YYYY Numeric: 4 digits or more + zero-padded 0005, 2021
Month M Numeric: 1 digit 8, 10
  MM Numeric: 2 digits + zero-padded 08, 10
  MMM Abbreviated Oct
  MMMM Wide October
  MMMMM Narrow S
Month standalone L Numeric: 1 digit 0, 10
  LL Numeric: 2 digits + zero-padded 08, 10
  LLL Abbreviated Oct
  LLLL Wide October
  LLLLL Narrow S
Week of year w Numeric: minimum digits 1... 53
  ww Numeric: 2 digits + zero padded 01... 53
Week of month W Numeric: 1 digit 1... 5
Day of month d Numeric: minimum digits 1
  dd Numeric: 2 digits + zero padded 01
Week day E, EE & EEE Abbreviated Mon
  EEEE Wide Monday
  EEEEE Narrow T
  EEEEEE Short Mo
Week day standalone c, cc Numeric: 1 digit 1
  ccc Abbreviated Mon
  cccc Wide Monday
  ccccc Narrow T
  cccccc Short Tu
Period a, aa & aaa Abbreviated am/pm or AM/PM
  aaaa Wide (fallback to a when missing) ante meridiem/post meridiem
  aaaaa Narrow a/p
Period* B, BB & BBB Abbreviated mid.
  BBBB Wide am, pm, midnight, noon, morning, afternoon, evening, night
  BBBBB Narrow md
Period standalone* b, bb & bbb Abbreviated mid.
  bbbb Wide am, pm, midnight, noon, morning, afternoon, evening, night
  bbbbb Narrow md
Hour 1-12 h Numeric: minimum digits 1, 12
  hh Numeric: 2 digits + zero-padded 01, 12
Hour 0-23 H Numeric: minimum digits 0, 23
  HH Numeric: 2 digits + zero-padded 00, 23
Minute m Numeric: minimum digits 8, 59
  mm Numeric: 2 digits + zero-padded 08, 59
Second s Numeric: minimum digits 0... 59
  ss Numeric: 2 digits + zero padded 00... 59
Fractional seconds S Numeric: 1 digit 0... 9
  SS Numeric: 2 digits + zero padded 00... 99
  SSS Numeric: 3 digits + zero-padded (= milliseconds) 000... 999
Zone z, zz & zzz Short specific non-location format (fallback to O) GMT-8
  zzzz Long specific non-location format (fallback to OOOO) GMT-08:00
  Z, ZZ & ZZZ ISO8601 basic format -0800
  ZZZZ Long localized GMT format GMT-8:00
  ZZZZZ ISO8601 extended format + Z indicator for offset 0 (= XXXXX) -08:00
  O, OO & OOO Short localized GMT format GMT-8
  OOOO Long localized GMT format GMT-08:00

Example:

{{ dateObj | date }}               // output is 'Feb 10, 2021'
{{ dateObj | date:'medium' }}      // output is 'Feb 10, 2021, 8:30:10 AM'
{{ dateObj | date:'short' }}       // output is '2/10/21, 8:30 AM'
{{ dateObj | date:'mediumDate' }}  // output is 'Feb 10, 2021'
{{ dateObj | date:'shortTime' }}   // output is '10:30 PM'
{{ dateObj | date:'mediumTime' }}  // output is '8:30:10 AM'
{{ dateObj | date:'mm:ss' }}       // output is '34:12'

ABOUT THE AUTHOR

Sabari M
Sabari M
Software Professional, India

IT professional with 14+ years of experience in Microsoft Technologies with a strong base in Microsoft .NET (C#.Net, ASP.Net MVC, ASP.NET WEB API, Webservices,...Read More

https://www.techieclues.com/profile/alagu-mano-sabari-m

Comments (0)

There are no comments. Be the first to comment!!!