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. This tutorial shows how to use Date Pipe using examples.
Table of Contents
Using Date Pipe
The Date uses the pipe operator i.e |. Specify the date_expression, which you want to format in the left side of the |. On the right side specify date followed by the arguments. It accepts three arguments format, timezone & locale
1 2 3 | {{ date_expression | date [ : format [ : timezone [ : locale ] ] ] }} |
Date Pipe Example
The following is the example of a date pipe it its simplest form.
1 2 3 4 5 | <h3>Using Date Pipe </h3> <p>Unformatted date : {{toDate }} </p> //Without pipe <p>Formatted date : {{toDate | date}} </p> //With Date Pipe |
Date Expression
The Date Expression can be anything that evaluates to date. For example it can be a Date object, a number (milliseconds since UTC epoch), or an ISO string
1 2 3 4 5 6 | //Component toDate: Date = new Date(); numDate=1590319189931; strDate="Sun May 24 2020 19:16:23"; |
1 2 3 4 5 6 | <h3>Date Expression </h3> <p>Date Object : {{toDate | date}} </p> //May 24, 2020 <p>Number Date : {{numDate | date}} </p> //May 24, 2020 <p>ISO Date : {{strDate | date}} </p> //May 24, 2020 |
Parameters to Date Pipe
The Date pipe accepts three arguments format, timezone & locale
| 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 formats options available
- Pre defined Format
- Custom Format string
Pre defined formats
The following are the Pre defined formats that you can use. We have also mentioned the corresponding custom formats next to it.
| Format | Equivalent Custom Format | Example | Result |
|---|---|---|---|
| short | 'M/d/yy, h:mm a' | {{toDate | date:'short'}} | 5/24/20, 3:40 PM |
| medium | 'MMM d, y, h:mm:ss a' | {{toDate | date:'medium'}} | May 24, 2020, 3:42:17 PM |
| long | 'MMMM d, y, h:mm:ss a z' | {{toDate | date:'long'}} | May 24, 2020 at 3:42:17 PM GMT+5 |
| full | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | {{toDate | date:'full'}} | Sunday, May 24, 2020 at 3:42:17 PM GMT+05:30 |
| shortDate | 'M/d/yy' | {{toDate | date:'shortDate'}} | 5/24/20 |
| mediumDate | 'MMM d, y' | {{toDate | date:'mediumDate'}} | May 24, 2020 |
| longDate | 'MMMM d, y' | {{toDate | date:'longDate'}} | May 24, 2020 |
| fullDate | 'EEEE, MMMM d, y' | {{toDate | date:'fullDate'}} | Sunday, May 24, 2020 |
| 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 the complete list of custom formats that are available
| 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
1 2 3 4 5 | {{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 following examples, shows how to use time zones
1 2 3 4 5 6 7 8 9 | Date in India (IST Time Zone) : {{toDate | date:'short':'IST'}} //Date in India (IST Time Zone) : 5/24/20, 7:32 PM Date in USA (CDT Time Zone) : {{toDate | date:'short':'CDT'}} //Date in USA (CDT Time Zone) : 5/24/20, 9:02 AM Date in India (+0530) : {{toDate | date:'short':'+0530'}} //Date in India (+0530) : 5/24/20, 7:32 PM Date in USA (-0700) : {{toDate | date:'short':'-0500'}} //Date in USA (-0700) : 5/24/20, 9:02 AM |
Country Locale Example
The Country Locale is the third argument.
1 2 3 | British date time is {{toDate | date:'dd/MM/yy HH:mm':'GMT':'en-GB'}} //British date time is 24/05/20 14:26 |
