Angular Date Pipe & formatting dates in Angular with examples

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

Using date pipe, we can convert a date object, a number (milliseconds from UTC) or an ISO date strings according to given predefined angular date formats or custom angular date formats.

How to Use Angular Date Pipe

Angular date pipe accpets three parameters

1. Format
2. Timezone
3. Locale

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

Angular Date Pipe Examples

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

I have created a date pipe 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 predefined date formats in Angular

Angular date pipe has 12 predefined date formats as shown in above table.

We have to pass first parameter “format” as quoted string with the predefined date 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 parameter 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 parameters 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 a 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 like ‘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 custom 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 custom date pipe in component file as shown below

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

Defining Custom date 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