How to format date with Angular DatePipe - Examples attached

If you are looking to format date according to the given data formats, locale information, and timezone in Angular using DatePipe, you have come to the right place. One of Angular fulstion to provide placid user experience is is DatePipe.

In this article, 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) that comes as a part of the Angular CommonModule.
Three parameters to consider in the case of Angular date pipeare:

• Format
• Timezone
• Locale

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

Formatting the Dates

In Angular, both the predefined date formats and customized date formats can be passed. The default value for formatting the date is mediumDate.

Example

{{todayDate | date:'medium'}}

Result: May 21, 2021, 11:45:16 AM

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.

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.

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.