Date Pipe In Angular 6 with examples
Pipe is nothing but just transform data in to required output.Generally Pipe (|) operator is required for perform it. Here I will explain step by step how to get different kind of date format using this pipe.
app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
1. Output of <b>Today | date :'fullDate'</b> <br/><br/>
{{today | date :'fullDate'}}
<br/><br/>2. Output of <b>today | date :'short'</b> <br/><br/>
{{today | date :'short'}}
<br/><br/>3. Output of <b>Today | date :'mediumTime'</b> <br/><br/>
{{today | date :'mediumTime'}}
<br/><br/>4. Output of <b>Today | date :'dd:MMM:yyyy hh-mm-ss z'</b> <br/><br/>
{{today | date :'dd:MMM:yyyy hh-mm-ss z'}}
<br/><br/>4. Output of <b>Today | date :'fullTime'</b> <br/><br/>
{{today | date :'fullTime'}}
<br/><br/>4. Output of <b>Today | date :'longTime'</b> <br/><br/>
{{today | date :'longTime'}}
<br/><br/>4. Output of <b>Today | date :'mediumTime'</b> <br/><br/>
{{today | date :'mediumTime'}}
<br/><br/>4. Output of <b>Today | date :'shortTime'</b> <br/><br/>
{{today | date :'shortTime'}}
<br/><br/>4. Output of <b>Today | date :'longDate'</b> <br/><br/>
{{today | date :'longDate'}}
<br/><br/>4. Output of <b>Today | date :'mediumDate'</b> <br/><br/>
{{today | date :'mediumDate'}}
<br/><br/>4. Output of <b>Today | date :'long'</b> <br/><br/>
{{today | date :'long'}}
<br/><br/>4. Output of <b>Today | date :'full'</b> <br/><br/>
{{today | date :'full'}}
<br/><br/>4. Output of <b>Today | date :'medium'</b> <br/><br/>
{{today | date :'medium'}}
|
app.component.ts
1
2
3
4
5
6
7
8
9
10
11
|
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title='app';
today=Date.now();
}
|
0 comments:
Post a Comment