Angular Datepipe | How to format Date using datepipe in Angular 12

Angular datepipe provides a bunch of date formatting functions for the date strings you pass into it. datepipe format dates into different formats (timezone). The date and time formatting is one of the most common tasks in any application.it also supports Timezone and Country locale information.

In this article, we are going to learn how to format date and time using Angular datepipe. We will learn how to format date and time in a dynamic way in our application with the help of some examples.

What is Angular Datepipe

Angular datepipe have two typical use cases transformation and validation.

transformation: transform require input data and provide data in the desired form (e.g., from string to integer)

validation: evaluate input data if valid, returns a result, otherwise throws an exception when the data is incorrect.

Sometimes, we need to convert the Date into a different format in the component template. I will help you with how you can change date format using an inbuilt Angular date pipe that will help you to convert date format.

How to use Angular Datepipe?

For Updating date format we are using Angular Datepipe then use the below syntax.

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

{{valueDate | date: 'dd/MM/yyyy'}}

 In app.component.ts file add the below code to format the dates.

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './home.component.html' ,
    styleUrls: ['./home.component.scss']
	
})
export class HomeComponent implements OnInit {
    
  srtDate:Date; 

  ngOnInit() {
    this.srtDate = new Date();
  }
}

Here srtDate is defined as a Date data type variable.  The date format string ‘short’ or ‘M/d/yy, h:mm a’ will be passed into the Angular Date Pipe in the HTML template.

 <div>{{objDate | date :'srtDate'}} </div>

Angular date format example

Let’s find out some Angular date format examples. Suppose we have a date that is assigned to the “strDate” variable in the component and will convert this date value to a different date and time format or zone.

export class HomeComponent implements OnInit {
    
  srtDate:Date; 

  ngOnInit() {
    this.srtDate = new Date();
  }
}

{{ strDate | date :’short’ }} will give output 2/10/22, 10:03 AM
{{ strDate | date :’M/d/yy’ }} will give output 1/10/22, 10:03 AM

Both Date formats will give the same output “Jan 10, 2022, 10:03:01 AM”.

{{ strDate | date :’medium’ }}
{{ strDate | date :’MMM d, y, h:mm:ss a’ }}

Output : Jan 10, 2022, 10:03:01 AM

Both Date formats will give the same output “March 10, 2022 at 10:03:01 AM GMT+1”.

{{ strDate | date :’long’ }}
{{ strDate | date :’MMMM d, y, h:mm:ss a z’ }}

Output : March 10, 2022 at 10:03:01 AM GMT+1

Both Date formats will give the same output “Monday, June 15, 2015 at 9:03:01 AM GMT+01:00“.

{{ strDate | date :’full’ }}
{{ strDate | date :’EEEE, MMMM d, y, h:mm:ss a zzzz’ }}

Output : Monday, June 15, 2015 at 9:03:01 AM GMT+01:00

Both Date formats will give the same output “6/10/22”.

{{ strDate | date :’shortDate’ }}
{{ strDate | date :’M/d/yy’ }}

Output : 6/10/22

Both Date formats will give the same output “Jun 10, 2022“.

{{ strDate | date :’mediumDate’ }}
{{ strDate | date :’MMM d, y’ }}

Output : Jun 10, 2022

Angular datepipe time format example

Now we will learn how to convert date to time format

Both Date formats will give the same output “9:03 AM”.

{{ strDate | date :’shortTime’ }}
{{ strDate | date :’h:mm a’ }}

Output : 9:03 AM

Both Date formats will give the same output “9:03:01 AM”.

{{ strDate | date :’mediumTime’ }}
{{ strDate | date :’h:mm:ss a’ }}

Output : 9:03:01 AM

Both Date formats will give the same output “10:20:01 AM GMT+1”.

{{ strDate | date :’longTime’ }}
{{ strDate | date :’h:mm:ss a z’ }}

Output : 10:20:01 AM GMT+1


Both Date formats will give the same output “10:03:15 AM GMT+01:00”.

{{ strDate | date :’fullTime’ }}
{{ strDate | date :’h:mm:ss a zzzz’ }}

Output : 10:03:15 AM GMT+01:00

Further Reading

  • Post category:Angular
  • Reading time:6 mins read