googleads
How to Use Angular Date Pipe With Timezone Examples | Angular Tutorial
loader image
Angular date pipe
Angular

How to Use Angular DatePipe With Timezone Examples

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. 

  1. Format
  2. Timezone
  3. 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

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

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

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

Today’s date shortened with timezone

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.

FormatEquivalent 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

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.

FieldFormat
Yeary
MonthM
Week of the yearw
Week of the monthW
Day of the monthd
WeekdayE
Perioda
Hours(1-12)h
Hours(0-23)H
Minutesm
Seconds

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

app.component.html

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

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.

LocaleCode
Arabicar
Armenianhy
Chinesezh
Englishen
Frenchfr
Greekel
Spanishes
Portuguesept
Tamilta
Hindihi

 

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

Example

el represents the code for the Greek language.

app.module.ts

app.component.html

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.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
The following two tabs change content below.
Nihashini Venugopal

Nihashini Venugopal

A Junior front end developer, specializing in Angular and JavaScript. This high spirited techie loves to write on the latest technologies and share Tutorials. She persuades different perspectives and grows with it. Apart from all this, she is a fantastic singer.
Nihashini Venugopal

Latest posts by Nihashini Venugopal (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *