date pipe

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

Formats a date value according to locale rules.

Source
<p>Today is {{today | date}}</p>
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<p>The time is {{today | date:'h:mm a z'}}</p>
export class AppComponent {
  today = Date.now();
}
Result

Today is Dec 11, 2018

Or if you prefer, Tuesday, December 11, 2018

The time is 2:37 PM GMT+0

Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data.

Parameters

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

format#

The date/time components to include, using predefined options or a custom format string.

format: string = 'mediumDate'

Pre-defined format options

Examples are given in en-US locale.

  • short: equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
  • medium: equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
  • long: equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
  • full: equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
  • shortDate: equivalent to 'M/d/yy' (6/15/15).
  • mediumDate: equivalent to 'MMM d, y' (Jun 15, 2015).
  • longDate: equivalent to 'MMMM d, y' (June 15, 2015).
  • fullDate: equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
  • shortTime: equivalent to 'h:mm a' (9:03 AM).
  • mediumTime: equivalent to 'h:mm:ss a' (9:03:01 AM).
  • longTime: equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
  • fullTime: equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

Custom format options

You can construct a format string using symbols to specify the components of a date-time value, as described in the official documentation.

timezone#

A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. Default is the local system timezone of the end-user's machine.

timezone?: string

locale#

A locale code for the locale format rules to use.

locale?: string

When not supplied, uses the value of LOCALE_ID, which is en-US by default. See Setting your app locale.