Angular 10/9/8 Date Pipe Example | Date Pipe in Angular

By Hardik Savani | April 7, 2020 | Category : Angular


Hi Dev,

This article will give you example of angular datepipe example. this example will help you angular date pipe example. This post will give you simple example of angular datepipe timezone example. step by step explain angular 10/9/8 datepipe example.

In this tutorial i will provide you 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, angular 9 and angular 10 application.

I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.

Syntax:

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

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 7, 2020

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 7, 2020, 9:54:20 AM

Today Long : April 7, 2020 at 9:54:20 AM GMT+5

Today Full : Tuesday, April 7, 2020 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/7/20

Today mediumDate : Apr 7, 2020

Today longDate : April 7, 2020

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();

}

Output:

Today Formate : 07/04/2020 09:57:27

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();

}

Output:

Today Formate : 07/04/2020 04:28:31

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: