-
-
-
- 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 -