Hi Dev,
In this post, we will learn how to use date pipe in angular 9/8/7. you can understand a concept of how to use datepipe in angular. this example will help you date pipe in angular example. if you want to see example of angular datepipe example then you are a right place.
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 and angular 9 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...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example