Table of Contents
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?
In the case of Angular date pipe, there are three parameters to consider.
- 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'}}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'}}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();
}
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'}}
Today’s date shortened with timezone{{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'}}
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>
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+5:30’ |
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 +5:30'}}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.
Example
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');
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'}} 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? BUSoft Technologies has a hands-on developer in the industry. Hire your own Angular developer now! And get started right away.
Author: Prasanna R
