{ "id": "api/common/DatePipe", "title": "DatePipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

DatePipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Formats a date value according to locale rules.

\n\n

See more...

\n
\n \n \n \n
\n {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}\n\n

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n value\n string | number | Date\n \n \n
\n \n \n

Parameterslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n format\n string\n

Optional. Default is 'mediumDate'.

\n \n
\n \n timezone\n string\n

Optional. Default is undefined.

\n \n
\n \n locale\n string\n

Optional. Default is undefined.

\n \n
\n \n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n\n
\n

Descriptionlink

\n

Only the en-US locale data comes with Angular. To localize dates\nin another language, you must import the corresponding locale data.\nSee the I18n guide for more information.

\n\n

Further information available in the Usage Notes...

\n
\n\n\n \n
\n

Usage noteslink

\n

The result of this pipe is not reevaluated when the input is mutated. To avoid the need to\nreformat the date on every change-detection cycle, treat the date as an immutable object\nand change the reference when the pipe needs to run again.

\n

Pre-defined format optionslink

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionEquivalent toExamples (given in en-US locale)
'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
\n

Custom format optionslink

\n

You can construct a format string using symbols to specify the components\nof a date-time value, as described in the following table.\nFormat details depend on the locale.\nFields marked with (*) are only available in the extra data set for the given locale.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Field typeFormatDescriptionExample Value
EraG, GG & GGGAbbreviatedAD
GGGGWideAnno Domini
GGGGGNarrowA
YearyNumeric: minimum digits2, 20, 201, 2017, 20173
yyNumeric: 2 digits + zero padded02, 20, 01, 17, 73
yyyNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
yyyyNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
Week-numbering yearYNumeric: minimum digits2, 20, 201, 2017, 20173
YYNumeric: 2 digits + zero padded02, 20, 01, 17, 73
YYYNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
YYYYNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
MonthMNumeric: 1 digit9, 12
MMNumeric: 2 digits + zero padded09, 12
MMMAbbreviatedSep
MMMMWideSeptember
MMMMMNarrowS
Month standaloneLNumeric: 1 digit9, 12
LLNumeric: 2 digits + zero padded09, 12
LLLAbbreviatedSep
LLLLWideSeptember
LLLLLNarrowS
Week of yearwNumeric: minimum digits1... 53
wwNumeric: 2 digits + zero padded01... 53
Week of monthWNumeric: 1 digit1... 5
Day of monthdNumeric: minimum digits1
ddNumeric: 2 digits + zero padded01
Week dayE, EE & EEEAbbreviatedTue
EEEEWideTuesday
EEEEENarrowT
EEEEEEShortTu
Week day standalonec, ccNumeric: 1 digit2
cccAbbreviatedTue
ccccWideTuesday
cccccNarrowT
ccccccShortTu
Perioda, aa & aaaAbbreviatedam/pm or AM/PM
aaaaWide (fallback to a when missing)ante meridiem/post meridiem
aaaaaNarrowa/p
Period*B, BB & BBBAbbreviatedmid.
BBBBWideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBBNarrowmd
Period standalone*b, bb & bbbAbbreviatedmid.
bbbbWideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbbNarrowmd
Hour 1-12hNumeric: minimum digits1, 12
hhNumeric: 2 digits + zero padded01, 12
Hour 0-23HNumeric: minimum digits0, 23
HHNumeric: 2 digits + zero padded00, 23
MinutemNumeric: minimum digits8, 59
mmNumeric: 2 digits + zero padded08, 59
SecondsNumeric: minimum digits0... 59
ssNumeric: 2 digits + zero padded00... 59
Fractional secondsSNumeric: 1 digit0... 9
SSNumeric: 2 digits + zero padded00... 99
SSSNumeric: 3 digits + zero padded (= milliseconds)000... 999
Zonez, zz & zzzShort specific non location format (fallback to O)GMT-8
zzzzLong specific non location format (fallback to OOOO)GMT-08:00
Z, ZZ & ZZZISO8601 basic format-0800
ZZZZLong localized GMT formatGMT-8:00
ZZZZZISO8601 extended format + Z indicator for offset 0 (= XXXXX)-08:00
O, OO & OOOShort localized GMT formatGMT-8
OOOOLong localized GMT formatGMT-08:00
\n

Format exampleslink

\n

These examples transform a date into various formats,\nassuming that dateObj is a JavaScript Date object for\nyear: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11,\ngiven in the local time for the en-US locale.

\n\n{{ dateObj | date }} // output is 'Jun 15, 2015'\n{{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'\n{{ dateObj | date:'shortTime' }} // output is '9:43 PM'\n{{ dateObj | date:'mm:ss' }} // output is '43:11'\n\n

Usage examplelink

\n

The following component uses a date pipe to display the current date in different formats.

\n\n@Component({\n selector: 'date-pipe',\n template: `<div>\n <p>Today is {{today | date}}</p>\n <p>Or if you prefer, {{today | date:'fullDate'}}</p>\n <p>The time is {{today | date:'h:mm a z'}}</p>\n </div>`\n})\n// Get the current date and time as a date-time value.\nexport class DatePipeComponent {\n today: number = Date.now();\n}\n\n\n
\n\n\n\n
\n
\n\n\n" }