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

1 2 3

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

Date Pipe Example

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

1 2 3 4 5

<h3>Using Date Pipe </h3> <p>Unformatted date : {{toDate }} </p>     //Without pipe <p>Formatted date : {{toDate | date}} </p>   //With Date Pipe

Date Pipe Example

BEST ANGULAR BOOKS
The Top 8 Best Angular Books, which helps you to get started with Angular  

 

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

1 2 3 4 5 6

//Component toDate: Date = new Date(); numDate=1590319189931; strDate="Sun May 24 2020 19:16:23";

1 2 3 4 5 6

<h3>Date Expression </h3> <p>Date Object : {{toDate | date}} </p>       //May 24, 2020 <p>Number Date : {{numDate | date}} </p>      //May 24, 2020 <p>ISO Date : {{strDate | date}} </p>         //May 24, 2020

Parameters to Date Pipe

The Date pipe accepts three arguments format, timezone & locale

ParameterData TypeParticulars

format	string	There are two types of format. 1. predefined formats 2. Custom format string Default: mediumDate.
timezone	string	Use A timezone offset (such as '+0430') Standard UTC/GMT continental timezone abbreviation. Default: End-users local system timezone
locale	string	A 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

Era	G, GG & GGG	Abbreviated	AD
	GGGG	Wide	Anno Domini
	GGGGG	Narrow	A
Year	y	Numeric: minimum digits	2, 20, 201, 2017, 20173
	yy	umeric: 2 digits + zero padded	02, 20, 01, 17, 73
	yyy	Numeric: 3 digits + zero padded	002, 020, 201, 2017, 20173
	yyyy	Numeric: 4 digits or more + zero padded	0002, 0020, 0201, 2017, 20173
Month	M	Numeric: 1 digit	9, 12
	MM	Numeric: 2 digits + zero padded	09, 12
	MMM	Abbreviated	Sep
	MMMM	Wide	September
	MMMMM	Narrow	S
Month standalone	L	Numeric: 1 digit	9, 12
	LL	Numeric: 2 digits + zero padded	09, 12
	LLL	Abbreviated	Sep
	LLLL	Wide	September
	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	Tue
	EEEE	Wide	Tuesday
	EEEEE	Narrow	T
	EEEEEE	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

Custom Format example

1 2 3 4 5

{{toDate | date:'dd/MM/y'}}                //24/05/2020   {{toDate | date:'dd/MM/yy HH:mm'}}         //May 24, 2020, 7:17:26 PM

Timezone Example

The following examples, shows how to use time zones

1 2 3 4 5 6 7 8 9

Date in India (IST Time Zone)  : {{toDate | date:'short':'IST'}}     //Date in India (IST Time Zone) : 5/24/20, 7:32 PM   Date  in USA (CDT Time Zone)   : {{toDate | date:'short':'CDT'}}    //Date in USA (CDT Time Zone) : 5/24/20, 9:02 AM   Date in India (+0530)     : {{toDate | date:'short':'+0530'}}     //Date in India (+0530) : 5/24/20, 7:32 PM   Date in USA (-0700)     : {{toDate | date:'short':'-0500'}}    //Date in USA (-0700) : 5/24/20, 9:02 AM

Country Locale Example

The Country Locale is the third argument.

1 2 3

British date time is {{toDate | date:'dd/MM/yy HH:mm':'GMT':'en-GB'}}       //British date time is 24/05/20 14:26

References

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

Read More

1. Pipes in Angular
2. Create a Custom Pipe in Angular