Angular date pipe is an inbuilt pipe that can be used to format date and time in angular according to given date formats, timezone, and country locale information. When we use DatePipe, We can easily convert the Date object, a number (milliseconds from UTC), or an ISO date string format according to given predefined angular date formats or custom angular date formats.
Syntax:
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
Angular accepts below 3 parameters,
| Parameter | Descriptions |
|---|---|
format |
Optional. Default is |
timezone |
Optional. Default is |
locale |
Optional. Default is |
Angular DateTime Formats:
| Type | Format | Description | Sample |
|---|---|---|---|
| Era | G, GG & GGG | Abbreviated | AD |
| GGGG | Wide | Anno Domini | |
| GGGGG | Narrow | A | |
| Year | y | Numeric: minimum digits | 2021 |
| yy | Numeric: 2 digits + zero-padded | 05, 21 | |
| yyy | Numeric: 3 digits + zero-padded | 005, 021 | |
| yyyy | Numeric: 4 digits or more + zero-padded | 0005, 2021 | |
| Week-numbering year | Y | Numeric: minimum digits | 2021 |
| YY | Numeric: 2 digits + zero-padded | 05, 21 | |
| YYY | Numeric: 3 digits + zero-padded | 005, 021 | |
| YYYY | Numeric: 4 digits or more + zero-padded | 0005, 2021 | |
| Month | M | Numeric: 1 digit | 8, 10 |
| MM | Numeric: 2 digits + zero-padded | 08, 10 | |
| MMM | Abbreviated | Oct | |
| MMMM | Wide | October | |
| MMMMM | Narrow | S | |
| Month standalone | L | Numeric: 1 digit | 0, 10 |
| LL | Numeric: 2 digits + zero-padded | 08, 10 | |
| LLL | Abbreviated | Oct | |
| LLLL | Wide | October | |
| 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 | Mon |
| EEEE | Wide | Monday | |
| EEEEE | Narrow | T | |
| EEEEEE | Short | Mo | |
| Week day standalone | c, cc | Numeric: 1 digit | 1 |
| ccc | Abbreviated | Mon | |
| cccc | Wide | Monday | |
| ccccc | Narrow | T | |
| cccccc | 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 |
Example:
{{ dateObj | date }} // output is 'Feb 10, 2021'
{{ dateObj | date:'medium' }} // output is 'Feb 10, 2021, 8:30:10 AM'
{{ dateObj | date:'short' }} // output is '2/10/21, 8:30 AM'
{{ dateObj | date:'mediumDate' }} // output is 'Feb 10, 2021'
{{ dateObj | date:'shortTime' }} // output is '10:30 PM'
{{ dateObj | date:'mediumTime' }} // output is '8:30:10 AM'
{{ dateObj | date:'mm:ss' }} // output is '34:12'
Comments (0)