The Angular DatePipe is used for formatting date according to the given data formats, locale information, and timezone. Applications need input data to show the desired information on the screen. Angular developers use different functionalities to increase the engagement of the user with the application. Developers use numerous functions in Angular to provide a placid user experience.

One of those functions is DatePipe. In this blog, you will learn how to use Angular DatePipe and format date with simple examples.

What is Angular DatePipe?

Angular Date pipe is an inbuilt Application Program Interface (API). It comes as a part of the Angular CommonModule.

In the case of Angular date pipe, there are three parameters to consider.

Format

Timezone

Locale

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

Formatting the Dates

Both the predefined date formats and customized date formats can be passed in Angular. The default value for formatting the date is mediumDate.

Example

{{todayDate | date:'medium'}} 1 { { todayDate | date : 'medium' } }

Result: Jun 15, 2019, 10:54:25 PM

Timezone

The user’s local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Since this takes the value of the local system it is considered as an optional parameter.

Example

{{todayDate | date:'short':'GMT'}} 1 { { todayDate | date : 'short' : 'GMT' } }

Result: 12/2/19, 11:40 AM

Locale

Default LOCALE_ID used by angular date pipe is en-US. It is a locale code for the locale format rules.

Simple date pipe Example

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { todayDate : Date = new Date(); } 1 2 3 4 5 6 7 8 9 import { Component } from '@angular/core' ; @ Component ( { selector : 'my-app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { todayDate : Date = new Date ( ) ; }

app.component.html

The below example will show the simple date pipe with one of its parameters, format. It basically limits the length of the result. Take a look at the example

Today’s date shortened

{{todayDate | date:'short'}} 1 { { todayDate | date : 'short' } }

Today’s date shortened with timezone

{{todayDate | date:'short':'+0000'}} 1 { { todayDate | date : 'short' : '+0000' } }

Result

Today’s date shortened 12/2/19, 5:59 PM

Today’s date shortened with timezone 12/2/19, 12:29 PM

Different Formats of date pipe in Angular

Listed below are the different values of format that can be used with the date pipe.

Format Equivalent value displayed ‘Short’ ‘M/d/yy, h:mm a’ ‘Medium’ ‘MMM d, y, h:mm:ss a’ ‘long’ ‘MMMM d, y, h:mm:ss a z’ ‘full’ ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ ‘shortDate’ ‘M/d/yy’ ‘mediumDate’ ‘MMM d, y’ ‘longDate’ ‘MMMM d, y’ ‘fullDate’ ‘EEEE, MMMM d, y’ ‘shortTime’ ‘h:mm a’ ‘mediumTime’ ‘h:mm:ss a’ ‘longTime’ ‘h:mm:ss a z’ ‘fullTime’ ‘h:mm:ss a zzzz’

Here is a brief example for the date pipe with various format parameters.

app.component.html

medium format: {{todayDate | date:'medium'}} long format: {{todayDate | date:'long'}} full format: {{todayDate | date:'full'}} shortDate format: {{todayDate | date:'shortDate'}} mediumDate format: {{todayDate | date:'mediumDate'}} longDate format: {{todayDate | date:'longDate'}} fullDate format: {{todayDate | date:'fullDate'}} shortTime format: {{todayDate | date:'shortTime'}} mediumTime format: {{todayDate | date:'mediumTime'}} longTime format: {{todayDate | date:'longTime'}} fullTime format: {{todayDate | date:'fullTime'}} 1 2 3 4 5 6 7 8 9 10 11 medium format : { { todayDate | date : 'medium' } } long format : { { todayDate | date : 'long' } } full format : { { todayDate | date : 'full' } } shortDate format : { { todayDate | date : 'shortDate' } } mediumDate format : { { todayDate | date : 'mediumDate' } } longDate format : { { todayDate | date : 'longDate' } } fullDate format : { { todayDate | date : 'fullDate' } } shortTime format : { { todayDate | date : 'shortTime' } } mediumTime format : { { todayDate | date : 'mediumTime' } } longTime format : { { todayDate | date : 'longTime' } } fullTime format : { { todayDate | date : 'fullTime' } }

Result

medium format: Dec 3, 2019, 12:35:54 PM

long format: December 3, 2019 at 12:35:54 PM GMT+5

full format: Tuesday, December 3, 2019 at 12:35:54 PM GMT+05:30

shortDate format: 12/3/19

mediumDate format: Dec 3, 2019

longDate format: December 3, 2019

fullDate format: Tuesday, December 3, 2019

shortTime format: 12:35 PM

mediumTime format: 12:35:54 PM

longTime format: 12:35:54 PM GMT+5

fullTime format: 12:35:54 PM GMT+05:30

Custom format options

Date pipes can also be customized by using the following formats listed below.

Field Format Year y Month M Week of the year w Week of the month W Day of the month d Weekday E Period a Hours(1-12) h Hours(0-23) H Minutes m Second s

Here is the example in which the format of date and time is being customized.

app.component.html

<p>Customised Date : {{todayDate | date:'dd MMM yyyy'}}</p> <p>Customised Date : {{todayDate | date:'MM/dd/yyyy'}}</p> <p>Customised Time : {{todayDate | date:'HH:mm:ss'}}</p> <p>Customised Date and Time : {{todayDate | date:'dd/MM/yyyy HH:mm:ss'}}</p> 1 2 3 4 < p > Customised Date : { { todayDate | date : 'dd MMM yyyy' } } < / p > < p > Customised Date : { { todayDate | date : 'MM/dd/yyyy' } } < / p > < p > Customised Time : { { todayDate | date : 'HH:mm:ss' } } < / p > < p > Customised Date and Time : { { todayDate | date : 'dd/MM/yyyy HH:mm:ss' } } < / p >

Result

Customised Date : 04 Dec 2019

Customised Date : 12/04/2019

Customised Time : 15:11:26

Customised Date and Time : 04/12/2019 15:11:26

Different Timezone of date pipe in Angular

Listed below are the different values of timezones that can be used with the Angular date pipe, which will display the corresponding time of the location anywhere in the world.

Alpha Time Zone ‘UTC+1’ Australian Central Time ‘UTC+9:30/ +10:30’ Arabia Standard Time ‘UTC+3’ Central Standard Time ‘UTC-6’ China Standard Time ‘UTC+8’ Delta Time Zone ‘UTC+4’ Greenwich Mean Time ‘UTC+0’ Gulf Standard Time ‘UTC+4’ Hawaii Standard Time ‘UTC-10’ India Standard Time ‘UTC+4’

Take a look at this example by which you can see various Time zones and the corresponding time.

app.component.html

Alpha Time Zone : {{todayDate | date:'short':'UTC +1'}} Australian Central Time : {{todayDate | date:'short':'UTC +9:30 / +10:30'}} Arabia Standard Time : {{todayDate | date:'short':'UTC +3'}} Central Standard Time : {{todayDate | date:'short':'UTC -6'}} China Standard Time : {{todayDate | date:'short':'UTC +8'}} Delta Time Zone : {{todayDate | date:'short':'UTC +4'}} Greenwich Mean Time : {{todayDate | date:'short':'UTC +0'}} Gulf Standard Time : {{todayDate | date:'short':'UTC +4'}} Hawaii Standard Time : {{todayDate | date:'short':'UTC -10'}} India Standard Time : {{todayDate | date:'short':'UTC +4'}} 1 2 3 4 5 6 7 8 9 10 Alpha Time Zone : { { todayDate | date : 'short' : 'UTC +1' } } Australian Central Time : { { todayDate | date : 'short' : 'UTC +9:30 / +10:30' } } Arabia Standard Time : { { todayDate | date : 'short' : 'UTC +3' } } Central Standard Time : { { todayDate | date : 'short' : 'UTC -6' } } China Standard Time : { { todayDate | date : 'short' : 'UTC +8' } } Delta Time Zone : { { todayDate | date : 'short' : 'UTC +4' } } Greenwich Mean Time : { { todayDate | date : 'short' : 'UTC +0' } } Gulf Standard Time : { { todayDate | date : 'short' : 'UTC +4' } } Hawaii Standard Time : { { todayDate | date : 'short' : 'UTC -10' } } India Standard Time : { { todayDate | date : 'short' : 'UTC +4' } }

Result

Alpha Time Zone: 12/2/19, 1:57 PM

Australian Central Time: 12/2/19, 11:27 PM

Arabia Standard Time: 12/2/19, 3:57 PM

Central Standard Time: 12/2/19, 6:57 AM

China Standard Time: 12/2/19, 8:57 PM

Delta Time Zone: 12/2/19, 4:57 PM

Greenwich Mean Time: 12/2/19, 12:57 PM

Gulf Standard Time: 12/2/19, 4:57 PM

Hawaii Standard Time: 12/2/19, 2:57 AM

India Standard Time: 12/2/19, 4:57 PM

Different Locale of date pipe in angular

Listed below are the various locales and their codes, which will provide you the result in the corresponding locales as of your needs.

Locale Code Arabic ar Armenian hy Chinese zh English en French fr Greek el Spanish es Portuguese pt Tamil ta Hindi hi

In this example, you will see the resulting data will look like. Remember to import LOCALE_ID from @angular/core, registerLocalData from @angular/common and do not forget to import the locale which you would like to see in the result.

Note: Ensure you register the locale data that you wish to use in the pipe for efficient functionality.

Syntax

registerLocaleData(localeCode, 'Code');where ID will take the code of the language. 1 registerLocaleData ( localeCode , 'Code' ) ; where ID will take the code of the language .

Example

registerLocaleData(localeEl, 'el'); 1 registerLocaleData ( localeEl , 'el' ) ;

el represents the code for the Greek language.

app.module.ts

import localeEl from '@angular/common/locales/el'; import localePy from '@angular/common/locales/es'; import localePt from '@angular/common/locales/pt'; import localeEn from '@angular/common/locales/en'; import localeTa from '@angular/common/locales/ta'; import localeHi from '@angular/common/locales/hi'; import { LOCALE_ID } from '@angular/core'; import { registerLocaleData } from '@angular/common'; registerLocaleData(localeEl, 'el'); registerLocaleData(localePy, 'es'); registerLocaleData(localePt, 'pt'); registerLocaleData(localeEn, 'en') registerLocaleData(localeTa, 'ta'); registerLocaleData(localeHi, 'hi'); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import localeEl from '@angular/common/locales/el' ; import localePy from '@angular/common/locales/es' ; import localePt from '@angular/common/locales/pt' ; import localeEn from '@angular/common/locales/en' ; import localeTa from '@angular/common/locales/ta' ; import localeHi from '@angular/common/locales/hi' ; import { LOCALE _ ID } from '@angular/core' ; import { registerLocaleData } from '@angular/common' ; registerLocaleData ( localeEl , 'el' ) ; registerLocaleData ( localePy , 'es' ) ; registerLocaleData ( localePt , 'pt' ) ; registerLocaleData ( localeEn , 'en' ) registerLocaleData ( localeTa , 'ta' ) ; registerLocaleData ( localeHi , 'hi' ) ;

app.component.html

Date time in Greek {{todayDate | date:'full':'+0200':'el'}} Date time in Spanish {{todayDate | date:'full':'+0200':'es'}} Date time in Portuguese {{todayDate | date:'full':'+0200':'pt'}} Date time in English {{todayDate | date:'full':'+0200':'en'}} Date time in Tamil {{todayDate | date:'full':'+0200':'ta'}} Date time in Hindi {{todayDate | date:'full':'+0200':'hi'}} 1 2 3 4 5 6 Date time in Greek { { todayDate | date : 'full' : '+0200' : 'el' } } Date time in Spanish { { todayDate | date : 'full' : '+0200' : 'es' } } Date time in Portuguese { { todayDate | date : 'full' : '+0200' : 'pt' } } Date time in English { { todayDate | date : 'full' : '+0200' : 'en' } } Date time in Tamil { { todayDate | date : 'full' : '+0200' : 'ta' } } Date time in Hindi { { todayDate | date : 'full' : '+0200' : 'hi' } }

Also Read Python range() Function Explained With Examples

Conclusion

The angular date pipe serves as a helpful tool that can help the Angular developers to work in ease and displaying the results for their commands. Angular Date Pipe is an inbuilt function that can be easily customized according to the user requirements.

Was this Helpful? Comment your opinion, doubts, and suggestions below!

Subscribe for our exclusive weekly newsletter and stay updated about technologies and developments.

Searching for a diverse skilled Developer for your project? Agira Technologies has a hands-on developer in the industry. Hire your own Angular developer now! And get started right away.