Date Pipe In Angular
In this article, we will learn how to use Date Pipe in angular with examples. We can format dates in Angular using the specified format, time zone, and local information using the Angular Date Pipe. It comes with pre-defined formats pre-installed. By establishing new format strings, we can additionally alter the date format. We can change the time zone, the country locale, and so on.
Syntax of Date Pipe
The pipe operator, i.e. |, is used by the Date. In the left side of the |, type the date expression you want to format. On the right, type in the date, then the arguments. It takes three parameters: format, timezone, and locale.
{{ date_expression | date [ : format [ : timezone [ : locale ] ] ] }}
Example
Here's an example of a date pipe in its most basic form.
<h3>Using Date Pipe </h3>
<p>Unformatted date : {{toDate }} </p> //Without pipe
<p>Formatted date : {{toDate | date}} </p> //With Date Pipe
Date Expression
Anything that evaluates to date can be used as a Date Expression. It could be a Date object, a number (milliseconds since UTC epoch), or an ISO string, for example.
Add the following code in to the app.component.ts file:
toDate: Date = new Date(); numDate=1590319189931; strDate="Sun May 24 2020 19:16:23";
Add the following code in to the app.component.html file:
<h3>Date Expression </h3>
<p>Date Object : {{toDate | date}} </p> //May 29, 2022
<p>Number Date : {{numDate | date}} </p> //May 29, 2022
<p>ISO Date : {{strDate | date}} </p> //May 29, 2022
Parameters to Date Pipe
Anything that evaluates to date can be used as a Date Expression. It could be a Date object, a number (milliseconds since UTC epoch), or an ISO string, for example.
| Parameter | Data Type | Particulars |
|---|---|---|
format | string | There are two types of format. 1. predefined formats 2. Custom format string Default: mediumDate. |
timezone | string | Use
|
locale | string | A locale code for the locale format rules to use. Default: The value of LOCALE_ID ( which is en-US) How to Change LOCALE_ID |
Date Format
There are two types of formats to choose from.
- Pre defined Format
- Custom Format string
Pre defined formats
The predefined formats that you can use are listed below. Next to it, we've listed the appropriate custom formats.
| Format | Equivalent Custom Format | Example | Result |
|---|---|---|---|
| short | 'M/d/yy, h:mm a' | {{toDate | date:'short'}} | 5/29/22, 3:40 PM |
| medium | 'MMM d, y, h:mm:ss a' | {{toDate | date:'medium'}} | May 29, 2022, 3:42:17 PM |
| long | 'MMMM d, y, h:mm:ss a z' | {{toDate | date:'long'}} | May 29, 2022 at 3:42:17 PM GMT+5 |
| full | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | {{toDate | date:'full'}} | Sunday, May 29, 2022 at 3:42:17 PM GMT+05:30 |
| shortDate | 'M/d/yy' | {{toDate | date:'shortDate'}} | 5/29/22 |
| mediumDate | 'MMM d, y' | {{toDate | date:'mediumDate'}} | May 29, 2022 |
| longDate | 'MMMM d, y' | {{toDate | date:'longDate'}} | May 29, 2022 |
| fullDate | 'EEEE, MMMM d, y' | {{toDate | date:'fullDate'}} | Sunday, May 29, 2022 |
| shortTime | 'h:mm a' | {{toDate | date:'shortTime'}} | 3:42 PM |
| mediumTime | 'h:mm:ss a' | {{toDate | date:'mediumTime'}} | 3:42:17 PM |
| longTime | 'h:mm:ss a z' | {{toDate | date:'longTime'}} | 3:42:17 PM GMT+5 |
| fullTime | 'h:mm:ss a zzzz' | {{toDate | date:'fullTime'}} | 3:42:17 PM GMT+05:30 |
Custom Format string
The following is a complete list of available custom formats.
| Field type | Format | Description | Example Value |
|---|---|---|---|
| Era | G, GG & GGG | Abbreviated | AD |
| GGGG | Wide | Anno Domini | |
| GGGGG | Narrow | A | |
| Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 |
| yy | umeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
| yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
| yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
| Month | M | Numeric: 1 digit | 9, 12 |
| MM | Numeric: 2 digits + zero padded | 09, 12 | |
| MMM | Abbreviated | Sep | |
| MMMM | Wide | September | |
| MMMMM | Narrow | S | |
| Month standalone | L | Numeric: 1 digit | 9, 12 |
| LL | Numeric: 2 digits + zero padded | 09, 12 | |
| LLL | Abbreviated | Sep | |
| LLLL | Wide | September | |
| LLLLL | Narrow | S | |
| Week of year | w | Numeric: minimum digits | 1... 53 |
| ww | Numeric: 2 digits + zero padded | 01... 53 | |
| Week of month | W | Numeric: 1 digit | 1... 5 |
| Day of month | d | Numeric: minimum digits | 1 |
| dd | Numeric: 2 digits + zero padded | 01 | |
| Week day | E, EE & EEE | Abbreviated | Tue |
| EEEE | Wide | Tuesday | |
| EEEEE | Narrow | T | |
| EEEEEE | Short | Tu | |
| Period | a, aa & aaa | Abbreviated | am/pm or AM/PM |
| aaaa | Wide (fallback to a when missing) | ante meridiem/post meridiem | |
| aaaaa | Narrow | a/p | |
| Period* | B, BB & BBB | Abbreviated | mid |
| BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| BBBBB | Narrow | md. | |
| Period standalone* | b, bb & bbb | Abbreviated | mid. |
| bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| bbbbb | Narrow | md | |
| Hour 1-12 | h | Numeric: minimum digits | 1, 12 |
| hh | Numeric: 2 digits + zero padded | 01, 12 | |
| Hour 0-23 | H | Numeric: minimum digits | 0, 23 |
| HH | Numeric: 2 digits + zero padded | 00, 23 | |
| Minute | m | Numeric: minimum digits | 8, 59 |
| mm | Numeric: 2 digits + zero padded | 08, 59 | |
| Second | s | Numeric: minimum digits | 0... 59 |
| ss | Numeric: 2 digits + zero padded | 00... 59 | |
| Fractional seconds | S | Numeric: 1 digit | 0... 9 |
| SS | Numeric: 2 digits + zero padded | 00... 99 | |
| SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | |
| Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 |
| zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | |
| Z, ZZ & ZZZ | ISO8601 basic format | -0800 | |
| ZZZZ | Long localized GMT format | GMT-8:00 | |
| ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | |
| O, OO & OOO | Short localized GMT format | GMT-8 | |
| OOOO | Long localized GMT format | GMT-08:00 |
Custom Format example
{{toDate | date:'dd/MM/y'}} //24/05/2020
{{toDate | date:'dd/MM/yy HH:mm'}} //May 24, 2020, 7:17:26 PM
Timezone Example
The examples below demonstrate how to use time zones.
Date in India (IST Time Zone) : {{toDate | date:'short':'IST'}} //Date in India (IST Time Zone) : 5/29/22, 7:32 PM
Date in USA (CDT Time Zone) : {{toDate | date:'short':'CDT'}} //Date in USA (CDT Time Zone) : 5/29/22, 9:02 AM
Date in India (+0530) : {{toDate | date:'short':'+0530'}} //Date in India (+0530) : 5/29/22, 7:32 PM
Date in USA (-0700) : {{toDate | date:'short':'-0500'}} //Date in USA (-0700) : 5/29/22, 9:02 AM
Locale Date Example
The third argument is the Country Locale.
British date time is {{toDate | date:'dd/MM/yy HH:mm':'GMT':'en-GB'}} //British date time is 29/05/22 14:26
Conclusion
In this article, we learned how to use Date Pipe in angular with examples; also we can format dates in Angular using the specified format, time zone, and local information using the Angular Date Pipe.I hope this article helps you and you will like it.👍
If you have any doubt or confusion then free to ask in comment section.