In Angular, We have a few built-in pipes. In this blog post, we’ll learn about Date pipe in Angular.
We’ll see an example of using Date Pipe with different options.
In Angular, Pipe is something that takes in data as input and transforms it to the desired output.
Table of Contents
Date Pipe
DatePipe is an API provided by angular. It is part of angular CommonModule. DatePipe localizing date in en-US language. If you want to localize dates in other languages you need to import corresponding locale data.
Angular Date Pipe allows us to format dates in Angular using the requested format, time zone & local information. It comes with built-in pre-defined formats. We can also customize the date format by creating custom format strings. We can set the time zone, country locale, etc.
Basic Format
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} Now let’s understand each fraction one by one.
value_expression:
– it can be a Date object
– it can be number(in milliseconds)
– it can be an ISO string.
Examples
1) Date Object Example:
We can declare value_expresssion as Date object in a component file as below.
@Component({
selector: "date-pipe",
template: `
<div>
<p>Today is {{ today | date }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
In the above code, we’ve used Date.now()
to get the current date and time.
Output:
Today is Oct 31, 2018
2) Number(milliseconds)
We can declare value_expresssion as Number in a component file as below.
@Component({
selector: "date-pipe",
template: `
<div>
<p>Today is {{ today | date }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = 1541000663839;
}
Output:
Today is Oct 31, 2018
3) ISO String
We can declare value_expresssion as ISO String in a component file as below.
@Component({
selector: "date-pipe",
template: `
<div>
<p>Today is {{ today | date }}</p>
</div>
`
})
export class DatePipeComponent {
today: string = "Wed Oct 05 2011 16:48:00 GMT+0200";
}
Output:
Today is Oct 5, 2011
Parameters
It has the following 3 parameters.
1) format
The date/time components to include, using predefined options or a custom format string. Optional. Default is ‘mediumDate’. Angular has few pre-defined formats.
Format | Output | Example |
---|---|---|
‘short’ | ‘M/d/yy, h:mm a’ | 6/15/15, 9:03 AM |
‘medium’ | ‘MMM d, y, h:mm:ss a’ | Jun 15, 2015, 9:03:01 AM |
‘long’ | ‘MMMM d, y, h:mm:ss a z’ | June 15, 2015 at 9:03:01 AM GMT+1 |
‘full’ | ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ | Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 |
‘shortDate’ | ‘M/d/yy’ | 6/15/15 |
‘mediumDate’ | ‘MMM d, y’ | Jun 15, 2015 |
‘longDate’ | ‘MMMM d, y’ | June 15, 2015 |
‘fullDate’ | ‘EEEE, MMMM d, y’ | Monday, June 15, 2015 |
‘shortTime’ | ‘h:mm a’ | 9:03 AM |
‘mediumTime’ | ‘h:mm:ss a’ | 9:03:01 AM |
‘longTime’ | ‘h:mm:ss a z’ | 9:03:01 AM GMT+1 |
‘fullTime’ | ‘h:mm:ss a zzzz’ | 9:03:01 AM GMT+01:00 |
2) timezone
A timezone offset (such as ‘+0430’), or a standard UTC/GMT or continental US timezone abbreviation. Default is the local system timezone of the end-user’s machine. Optional. Default is undefined.
3) locale
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. Optional. Default is undefined.
Examples
#1 Angular DatePipe format: short
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "short" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10/31/18, 10:32 PM
#2 Angular DatePipe format: medium
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "medium" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
Oct 31, 2018, 10:42:27 PM
#3 Angular DatePipe format: long
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "long" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
October 31, 2018 at 10:51:12 PM GMT+5
#4 Angular DatePipe format: full
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "full" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
Wednesday, October 31, 2018 at 10:52:21 PM GMT+05:30
#5 Angular DatePipe format: shortDate
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "shortDate" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10/31/18
#6 Angular DatePipe format: mediumDate
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "mediumDate" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
Oct 31, 2018
#7 Angular DatePipe format: longDate
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "longDate" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
October 31, 2018
#8 Angular DatePipe format: fullDate
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "fullDate" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
Wednesday, October 31, 2018
#9 Angular DatePipe format: shortTime
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "shortTime" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10:55 PM
#10 Angular DatePipe format: mediumTime
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "mediumTime" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10:56:44 PM
#11 Angular DatePipe format: longTime
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "longTime" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10:58:16 PM GMT+5
#12 Angular DatePipe format: fullTime
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "fullTime" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10:57:56 PM GMT+05:30
Custom format options
Field | Format |
---|---|
Year | y |
Month | M |
Week of the year | w |
Week of the month | W |
Day of the month | d |
Week day | E |
Period | a |
Hour(1-12) | h |
Hour(0-23) | H |
Minute | m |
Second | s |
You can read more about custom format options for official angular docs: Angular DatePipe Custom Format Options
Custom Format Examples
#1 Angular Custom Format Example
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "dd/MM/yyyy" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
31/10/2018
#2 Angular Custom Format Example
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "dd/MM/yyyy HH:mm:ss" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
31/10/2018 23:33:05
#3 Angular Custom Format Example
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: 'HH:mm:ss' }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
23:33:05
#4 Angular Custom Format Example
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "MM/dd/yyyy" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
10/31/2018
#5 Angular Custom Format Example
@Component({
selector: "date-pipe",
template: `
<div>
<p>{{ today | date: "dd MMM yyyy" }}</p>
</div>
`
})
export class DatePipeComponent {
today: number = Date.now();
}
Output:
31 Oct 2018
Also, read:
- Angular Slice Pipe Example
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- Custom Validators in Angular
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- Getting Started With Angular Reactive Forms
- How to convert string to number in javascript or typescript
- JavaScript Functions
- JavaScript Absolute Beginner’s Guide
If you like this post, please share it with your friends.
Thanks.