## What it does

Formats a date according to locale rules.

## How to use

`date_expression | date[:format]`

## NgModule

CommonModule

## Description

Where:

- `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string (https://www.w3.org/TR/NOTE-datetime).
- `format` indicates 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 PM` for `en-US`)
  - `'short'`: equivalent to `'yMdjm'` (e.g. `9/3/2010, 12:05 PM` for `en-US`)
  - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. `Friday, September 3, 2010` for `en-US`)
  - `'longDate'`: equivalent to `'yMMMMd'` (e.g. `September 3, 2010` for `en-US`)
  - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. `Sep 3, 2010` for `en-US`)
  - `'shortDate'`: equivalent to `'yMd'` (e.g. `9/3/2010` for `en-US`)
  - `'mediumTime'`: equivalent to `'jms'` (e.g. `12:05:08 PM` for `en-US`)
  - `'shortTime'`: equivalent to `'jm'` (e.g. `12:05 PM` for `en-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':

{{ 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'
@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