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.

Table of Contents

Angular date pipe accpets three parameters

Format Timezone Locale

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

Parameter Description format We can pass predefined angular date formats or our custom date format as a parameter. The default value is 'mediumDate' (Optional parameter) timezone The 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 an optional parameter locale represents locale format rules to use. Default value is our project locale (en_US) if set or undefined.Optional parameter

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.

Date Format Angular datepipe code Result 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 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.

short medium long full shortDate mediumDate longDate fullDate shortTime mediumTime longTime fullTime

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

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

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

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

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