+
+
+
+ What it does
Formats a date according to locale rules.
+
+
+
+
+ How to use
date_expression | date[:format]
+
+
+ NgModule
CommonModule
+
+
+
+
+
+
+
+ {{ dateObj | date }} // output is 'Jun 15,
+ 2015'
+ {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
+ {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
+ {{ dateObj | date:'mmss' }} // output is '43:11'
+
+
+
+ Description
Where:
+-
+
expressionis a date object or a number (milliseconds since UTC epoch) or + an ISO string + (https://www.w3.org/TR/NOTE-datetime). +
+ formatindicates which date/time components to include. The format can be + predifined as + shown below or custom as shown in the table. +-
+
'medium': equivalent to'yMMMdjms'(e.g. +Sep 3, 2010, 12:05:08 PMforen-US) +
+ 'short': equivalent to'yMdjm'(e.g. +9/3/2010, 12:05 PMforen-US) +
+ 'fullDate': equivalent to'yMMMMEEEEd'+ (e.g.Friday, September 3, 2010foren-US) +
+ 'longDate': equivalent to'yMMMMd'(e.g. +September 3, 2010foren-US) +
+ 'mediumDate': equivalent to'yMMMd'(e.g. +Sep 3, 2010foren-US) +
+ 'shortDate': equivalent to'yMd'(e.g. +9/3/2010foren-US) +
+ 'mediumTime': equivalent to'jms'(e.g. +12:05:08 PMforen-US) +
+ 'shortTime': equivalent to'jm'(e.g. +12:05 PMforen-US) +
+
+
| Component | +Symbol | +Narrow | +Short Form | +Long Form | +Numeric | +2-digit | +
|---|---|---|---|---|---|---|
| era | +G | +G (A) | +GGG (AD) | +GGGG (Anno Domini) | +- | +- | +
| year | +y | +- | +- | +- | +y (2015) | +yy (15) | +
| month | +M | +L (S) | +MMM (Sep) | +MMMM (September) | +M (9) | +MM (09) | +
| day | +d | +- | +- | +- | +d (3) | +dd (03) | +
| weekday | +E | +E (S) | +EEE (Sun) | +EEEE (Sunday) | +- | +- | +
| hour | +j | +- | +- | +- | +j (13) | +jj (13) | +
| hour12 | +h | +- | +- | +- | +h (1 PM) | +hh (01 PM) | +
| hour24 | +H | +- | +- | +- | +H (13) | +HH (13) | +
| minute | +m | +- | +- | +- | +m (5) | +mm (05) | +
| second | +s | +- | +- | +- | +s (9) | +ss (09) | +
| timezone | +z | +- | +- | +z (Pacific Standard Time) | +- | +- | +
| timezone | +Z | +- | +Z (GMT-8:00) | +- | +- | +- | +
| timezone | +a | +- | +a (PM) | +- | +- | +- | +
In javascript, only the components specified will be respected (not the ordering, + punctuations, ...) and details of the formatting will be dependent on the locale.
+Timezone of the formatted text will be the local system timezone of the end-user's + machine.
+WARNINGS:
+-
+
- this pipe is marked as pure hence it will not be re-evaluated when the input is mutated. + Instead users should treat the date as an immutable object and change the reference when + the + pipe needs to re-run (this is to avoid reformatting the date on every change detection run + which would be an expensive operation). + +
- this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and + Opera + browsers. + +
Examples
+Assuming dateObj is (year: 2015, month: 6, day: 15, hour: 21, minute: 43,
+ second: 11)
+ in the local time and locale is 'en-US':
+ @Component({
+ selector: 'date-pipe',
+ template: `<div>
+ <p>Today is {{today | date}}</p>
+ <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+ <p>The time is {{today | date:'jmZ'}}</p>
+ </div>`
+ })
+ export class DatePipeComponent {
+ today: number = Date.now();
+ }
+
+
+ exported from @angular/common/index + defined in @angular/common/src/pipes/date_pipe.ts +