Pipes in Angular Part – 2 : DatePipe

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  today: number = Date.now();
}

<div style="text-align:center">
  <p>Today is : {{today}}
</div>

Now let’s consider below code in which we will convert date to readable format

<div style="text-align:center">
  <p>Today is : {{today | date}}
</div>

Output

The date is readable, but our client always asks us to format it. So Angular do have the answer for that too. Angular provides some predefined date formats, and also allow us to write our custom format.

Consider below code in which we are applying Angular’s default ‘short’ format

<div style="text-align:center">
  <p>Today is : {{today | date : 'short'}}
</div>

//Output: Today is : 7/1/18, 6:46 PM

Below is the full list of formatting options Angular provides

Format	Code	Output Format	Output
short	{{today | date : ‘short’}}	M/d/yy, h:mm a	7/1/18, 6:58 PM
medium	{{today | date : ‘medium’}}	MMM d, y, h:mm:ss a	Jul 1, 2018, 6:58:54 PM
long	{{today | date : ‘long’}}	MMMM d, y, h:mm:ss a z	July 1, 2018 at 7:06:35 PM GMT+5
full	{{today | date : ‘full’}}	EEEE, MMMM d, y, h:mm:ss a zzzz	Sunday, July 1, 2018 at 7:07:54 PM GMT+05:30
shortDate	{{today | date : ‘shortDate’}}	M/d/yy	7/1/18
mediumDate	{{today | date : ‘mediumDate’}}	MMM d, y	Jul 1, 2018
longDate	{{today | date : ‘longDate’}}	MMMM d, y	July 1, 2018
fullDate	{{today | date : ‘fullDate’}}	EEEE, MMMM d, y	Sunday, July 1, 2018
shortTime	{{today | date : ‘shortTime’}}	h:mm a	7:16 AM
mediumTime	{{today | date : ‘mediumTime’}}	h:mm:ss a	7:16:28 PM
longTime	{{today | date : ‘longTime’}}	h:mm:ss a z	7:16:28 PM GMT+5
fullTime	{{today | date : ‘fullTime’}}	h:mm:ss a zzzz	7:16:28 PM GMT+05:30

Custom formatting options

You can construct a format string using symbols to specify the components of a date-time value, as described in the following table.

Field type	Format	Description	Example 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	Numeric: 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

Let us consider an example with some of the defalut and custom formatting options. For this example we will use same component from previous example.

app.component.html

<div style="text-align:left">
  <p>In fullTime format : {{today | date : 'fullTime'}}
  <p>In mediumDate format : {{today | date : 'mediumDate'}}
  <p>In long format : {{today | date : 'long'}}
  <p>In shortDate format : {{today | date : 'shortDate'}}
  <p>In shortTime format : {{today | date : 'shortTime'}}
  <p>In custom fullTime format : {{today | date : 'h:mm:ss a zzzz'}}
  <p>In custom mediumDate format : {{today | date : 'MMM d, y'}}
  <p>In custom long format : {{today | date : 'MMMM d, y, h:mm:ss a z'}}
  <p>In custom shortDate format : {{today | date : 'M/d/yy'}}
  <p>In custom shortTime format : {{today | date : 'h:mm a'}}
</div>

Output

Summary

Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. In next part we will get information on CurrencyPipe, PercentPipe