Angular Date Pipe & formatting date times in Angular with examples

Learn how to format dates in Angular using Angular date Pipe

Angular Date Pipe

Angular date pipe used to format dates in angular according to the given datetime formats,timezone and country locale information.

We can convert a date object, a number (milliseconds from UTC) or an ISO date strings according to given pre defined angular date formats or custom angular date formats.

Table of Contents

Angular Date Pipe Syntax

Angular date pipe accpets threee parameters

  1. format
  2. timezone
  3. locale
{{ date_Value | date [ : format [ : timezone [ : locale ] ] ] }}

ParameterDescription
formatWe can pass predefined angular date formats or our custom date format as a parameter. The default value is 'mediumDate'. Optional parameter
timezoneThe default timezone is local system timezone of the user's machine. To change the timezone we can pass timezone offset ('0530') or standard UTC/GMT (IST) or continental US timezone abbreviation and it is optional parameter
localerepresents locale format rules to use. Default value is our project locale (en_US) if set or undefined.Optional parameter

Angular Date Pipe Examples

Now we will go through few examples to understand it further.

I have created a datepipe component in my Angular project and added current datetime values in different formats like milliseconds,date object,datetime string,ISO datetime string.

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

@Component({
  selector: 'app-datepipe',
  templateUrl: './datepipe.component.html',
  styleUrls: ['./datepipe.component.scss']
})
export class DatepipeComponent implements OnInit {

  todayNumber: number = Date.now();
  todayDate : Date = new Date();
  todayString : string = new Date().toDateString();
  todayISOString : string = new Date().toISOString();

  constructor() { 
    
  }
  
  ngOnInit() {
  }

}

Now in my component I am displaying them using angular date pipe as shown below.

<p>DateTime as Milliseconds : {{todayNumber}} 
datepipe:{{todayNumber | date}}</p>
<p>DateTime as object : {{todayDate}} 
datepipe:{{todayDate | date}}</p>
<p>DateTime as string : {{todayString}} 
datepipe:{{todayString | date}}</p>
<p>DateTime as iso string : {{todayISOString}} 
datepipe:{{todayISOString | date}}</p>

Output:
DateTime as Milliseconds : 1560617468681 
datepipe:Jun 15, 2019

DateTime as object : Sat Jun 15 2019 22:21:08 GMT+0530 
(India Standard Time) 
datepipe:Jun 15, 2019

DateTime as string : Sat Jun 15 2019 
datepipe:Jun 15, 2019

DateTime as iso string : 2019-06-15T16:51:08.681Z 
datepipe:Jun 15, 2019


All types of datetime values displays the date in ‘MMM d, y’ format which is default Angular date format ‘mediumDate’

To change the datetime format in angular we have to pass date time format parameter to the angular pipe as shown below

{{ date_value | date :'short'}}

// 6/15/19, 5:24 PM

The format ‘short’ is one of the predefined date formats in angular which converts our date value to ’M/d/yy, h:mm a’ format.

List of all pre-defined datetime formats in Angular

DateTime FormatAngular datepipe codeResult
M/d/yy, h:mm a{{todayDate | date:'short'}}6/15/19, 10:54 PM
MMM d, y, h:mm:ss a{{todayDate | date:'medium'}}Jun 15, 2019, 10:54:25 PM
MMMM d, y, h:mm:ss a z{{todayDate | date:'long'}}June 15, 2019 at 10:54:25 PM GMT+5
EEEE, MMMM d, y, h:mm:ss a zzzz{{todayDate | date:'full'}}Saturday, June 15, 2019 at 10:54:25 PM GMT+05:30
M/d/yy{{todayDate | date:'shortDate'}}6/15/19
MMM d, y{{todayDate | date:'mediumDate'}}Jun 15, 2019
MMMM d, y{{todayDate | date:'longDate'}}June 15, 2019
EEEE, MMMM d, y{{todayDate | date:'fullDate'}}Saturday, June 15, 2019
h:mm a{{todayDate | date:'shortTime'}}10:54 PM
h:mm:ss a{{todayDate | date:'mediumTime'}}10:54:25 PM
h:mm:ss a z{{todayDate | date:'longTime'}}10:54:25 PM GMT+5
h:mm:ss a zzzz{{todayDate | date:'fullTime'}}10:54:25 PM GMT+05:30

Angular datetime pipe has 12 pre-defined date time formats as shown in above table.

We have to pass first parameter “format” as quoted string with the pre-defined date time format names listed below.

  1. short
  2. medium
  3. long
  4. full
  5. shortDate
  6. mediumDate
  7. longDate
  8. fullDate
  9. shortTime
  10. mediumTime
  11. longTime
  12. fullTime

Angular date pipe timezone example

In addition to the date format we can pass timezone as a parameter to date pipe to display date in particular timezone.

The timezone paramter can be timezone offset (‘0530’) or standard UTC/GMT (IST) or continental US timezone abbreviation.

For example to display to time in IST timezone

Today is {{todayDate | date:'short':'IST'}}
Today is {{todayDate | date:'short':'+0530'}}

Result:
Today is 6/19/19, 12:29 PM

How to display UTC date time in angular using date pipe

To display UTC date and time in Angular we have to pass timezone paramters as ‘UTC’ or timezone offset as ‘+0000’ as shown below

Today is {{todayDate | date:'short':'UTC'}}
Today is {{todayDate | date:'short':'+0000'}}

Result:
Today is 6/19/19, 11:11 AM

Angular date pipe example with country locale

To display date according to country locale format rules, We have to pass country locale code as a third parameter to angular date pipe as shown below.

For example France follows Central European Summer Time and it has an timezone offset ‘+0200’.

To display date time in french locale in Angular use locale code ‘fr’ as parameter as shown below

<p>French date time is {{todayDate | date:'full':'+0200':'fr'}}</p>

Result:
French date time is mercredi 19 juin 2019 à 13:25:15 GMT+02:00

But the above code returns the error in console saying Missing locale data for the locale “fr”.

In our application we dont have locale information for ‘fr’

To add the country locale information refer Angular currency pipe article

Creating Custom Date Pipe in Angular

The default date format in Angular is ‘mediumDate’.

What if we want to change it and replace it with our own custom format ‘EEEE d MMMM y h:mm a’

Which displays time as ‘Wednesday 19 June 2019 8:33 PM’.

In our angular projects, we will be displaying dates very frequently and each time we need to pass the format parameter.

To avoid this We can create our own custome date pipe with the above format, use it across the application as shown below.

{{ todayDate | customDate }}

Result:
Wednesday 19 June 2019 8:33 PM

To create a custom date pipe follow the below steps

Create a file named custom.datepipe.ts add the below code.

   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, "EEEE d MMMM y h:mm a");
     }
   }

And import CustomDatePipe in app.module.ts and add it in declaration array of AppModule.

   import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

Now we can use our custome date pipe in component file as shown below

   {{todayDate | customDate}}
   Result:
   Thursday 20 June 2019 4:15 AM

Defining Custom datetime formats in Angular

In addition to the above date time formats,we can define our own custom datetime formats using the below symbols.

For example {{today | date:'GGGG'}} displays the era of time “Anno Domini”

We can combine these symbols to display our own date formats as shown below.

{{today | date:'EEEE d MMMM y GGGG'}}

// Tuesday 18 June 2019 Anno Domini
Format NameFormat specifierEg. Result
EraG, GG & GGG(Abbreviated)AD
GGGG(Wide)Anno Domini
GGGGG(Narrow)A
Yeary(Numeric: minimum digits)2019
yy(Numeric: 2 digits + zero padded)19
yyy(Numeric: 3 digits + zero padded)2019
yyyy(Numeric: 4 digits or more + zero padded)2019
MonthM(Numeric: 1 digit)6
MM(Numeric: 2 digits + zero padded)06
MMM(Abbreviated)Jun
MMMM(Wide)June
MMMMM(Narrow)J
Month standaloneL(Numeric: 1 digit)6
LL(Numeric: 2 digits + zero padded)06
LLL(Abbreviated)Jun
LLLL(Wide)June
LLLLL(Narrow)J
Week of yearw(Numeric: minimum digits)25
ww(Numeric: 2 digits + zero padded)25
Week of monthW(Numeric: 1 digit)4
Day of monthd(Numeric: minimum digits)16
dd(Numeric: 2 digits + zero padded)16
Week dayE, EE & EEE(Abbreviated)Sun
EEEE(Wide)Sunday
EEEEE(Narrow)S
EEEEEE(Short)Su
Perioda, aa & aaa(Abbreviated)PM
aaaa(Wide)PM
aaaaa(Narrow)p
Period*B, BB & BBB Abbreviatedmid
BBBB Wideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBB Narrowmd
Period standalone*b, bb & bbb Abbreviatedmid
bbbb Wideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbb Narrowmid
Hour 1-12h(Numeric: minimum digits)10
hh(Numeric: 2 digits + zero padded)10
Hour 0-23H(Numeric: minimum digits)22
HH(Numeric: 2 digits + zero padded)22
Minutem(Numeric: minimum digits)35
mm(Numeric: 2 digits + zero padded)35
Seconds(Numeric: minimum digits [0 to 59])28
ss(Numeric: 2 digits + zero padded [00 to 59])28
Fractional secondsS(Numeric: 1 digit [0 to 9])1
SS(Numeric: 2 digits + zero padded [00 to 99])13
SSS(Numeric: 3 digits + zero padded [000 to 9999 milliseconds])135
Zonez, zz & zzz(Short specific non location format)GMT+5
zzzz(Long specific non location format (fallback to OOOO))GMT+05:30
Z, ZZ & ZZZ(ISO8601 basic format)+0530
ZZZZ(Long localized GMT format)GMT+05:30
ZZZZZ(ISO8601 extended format + Z indicator for offset 0 (= XXXXX))+05:30
O, OO & OOO(Short localized GMT format)GMT+5
OOOO(Long localized GMT format)GMT+05:30
Spread the word :

Get free link to download 900+ material icons
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Next
Previous