Hello Devs, 

In this tutorial, we will learn Angular Date Pipe Example | Date Pipe in Angular 9/8/7

In this section, you will see full example and how to use angular date pipe with date formate, date timezone and locale. you can use it in angular 6, angular 7, angular 8 and angular 9 application.

Follow this step by step guide below. 



Default Example:

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

  

@Component({

  selector: 'my-app',

  template: `<div>

      <p>Today : {{ myDate | date }}</p>

   </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}


Output:

Today : Apr 3, 2021


Date Pipe with short, medium, long and full:

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

 

@Component({

  selector: 'my-app',

  template: `<div>

   <p>Today Short : {{ myDate | date: 'short' }}</p>

   <p>Today Medium : {{ myDate | date: 'medium' }}</p>

   <p>Today Long : {{ myDate | date: 'long' }}</p>

   <p>Today Full : {{ myDate | date: 'full' }}</p>

 </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}



Output: 

Today Short : 4/7/20, 9:54 AM

  

Today Medium : Apr 3, 2021, 9:54:20 AM

  

Today Long : April 3, 2021 at 9:54:20 AM GMT+5

  

Today Full : Saturday, April 3, 2021 at 9:54:20 AM GMT+05:30


Date Pipe with shortDate, mediumDate, longDate and fullDate

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

  

@Component({

  selector: 'my-app',

  template: `<div>

   <p>Today ShorshortDatet : {{ myDate | date: 'shortDate' }}</p>

   <p>Today mediumDate : {{ myDate | date: 'mediumDate' }}</p>

   <p>Today longDate : {{ myDate | date: 'longDate' }}</p>

   <p>Today fullDate : {{ myDate | date: 'fullDate' }}</p>

 </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}


Output: 

Today ShorshortDatet : 4/3/21

  

Today mediumDate : Apr 3, 2021

  

Today longDate : April 3, 2021

 

Today fullDate : Tuesday, April 7, 2020



Date Pipe with shortTime, mediumTime, longTime and fullTime

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

  

@Component({

  selector: 'my-app',

  template: `<div>

   <p>Today shortTime : {{ myDate | date: 'shortTime' }}</p>

   <p>Today mediumTime : {{ myDate | date: 'mediumTime' }}</p>

   <p>Today longTime : {{ myDate | date: 'longTime' }}</p>

   <p>Today fullTime : {{ myDate | date: 'fullTime' }}</p>

 </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}


Output: 

Today shortTime : 9:56 AM

  

Today mediumTime : 9:56:04 AM

  

Today longTime : 9:56:04 AM GMT+5

  

Today fullTime : 9:56:04 AM GMT+05:30


Date Pipe with format:

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

  

@Component({

  selector: 'my-app',

  template: `<div>

   <p>Today Formate : {{ myDate | date: 'dd/MM/yyyy hh:mm:ss'  }}</p>

 </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}



Date Pipe with timezone:

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

  

@Component({

  selector: 'my-app',

  template: `<div>

   <p>Today Formate : {{ myDate | date: 'dd/MM/yyyy hh:mm:ss' :'UTC' }}</p>

 </div>`,

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  myDate: number = Date.now();

}


May this example help you.