Angular 6 References/ Templates
References
Oleksa Novyk | GitHub

date pipe

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

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 Oct 10, 2020

Or if you prefer, Saturday, October 10, 2020

The time is 4:26 PM GMT+3

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#

format: string = 'mediumDate'
The date/time components to include, using predefined options or a custom format string. #### 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](https://angular.io/api/common/DatePipe#custom-format-options).

timezone#

timezone?: string
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.

locale#

locale?: string
A locale code for the locale format rules to use. When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default. See [Setting your app locale](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app).