Angular Date Pipe

How to format date using Date Pipe in Angular? Angular date pipe example usages.

Let’s see how to you can use date pipe in your Angular application to format dates. First let’s have a look at what happens if you don’t use a date pipe to render a date object.

Here is my app.component.ts where I have one date object in variable today.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  today : Date = new Date();
  
  constructor() { }

  ngOnInit(): void {
    
  }
}

And here is my date object today rendered without a date pipe.

<p> {{today}} </p>

On running the application, the rendered output will be,

Wed Sep 22 2021 07:45:10 GMT+0530 (India Standard Time)

Now let’s add a date pipe.

Format Date as MMM d, y

On using the date pipe without any pre defined format, the date is formatted to 'MMM d, y'

<p> {{today | date}} </p>

The above code outputs,

Sep 22, 2021

There are many other date pipe formats supported by Angular date pipe, let’s take a look at couple of them.

Format Date MM/dd/yyyy

Pass the date format along with the date pipe to format the date to the specific format.

<p> {{today | date: 'MM/dd/yyyy'}} </p>

The above code outputs,

09/22/2021

Format Date dd/MM/yyyy

<p> {{today | date: 'dd/MM/yyyy'}} </p>

The above code outputs,

22/09/2021

Format Date to UTC

You can specify the timezone while using the date pipe. To convert the date to UTC

<p> {{today | date: 'h:mm:ss a zzzz' :'+0000'}} </p>

The above code outputs,

2:42:55 AM GMT+00:00

Format Date to Timezone

Similar to the way you defined +0000 for UTC, you can specify timezone for converting the date to say EST timezone which is -0500.

<p> {{today | date: 'h:mm:ss a zzzz' :'-0500'}}</p>

The above code outputs,

9:56:21 PM GMT-05:00