DatePipe

Formats a date value according to locale rules.

DatePipe is executed only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String, Number, Boolean, or Symbol), or a changed object reference (such as Date, Array, Function, or Object).

Note that mutating a Date object does not cause the pipe to be rendered again. To ensure that the pipe is executed, you must create a new Date object.

Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. See the I18n guide for more information.

The time zone of the formatted value can be specified either by passing it in as the second parameter of the pipe, or by setting the default through the DATE_PIPE_DEFAULT_OPTIONS injection token. The value that is passed in as the second parameter takes precedence over the one defined using the injection token.

The result of this pipe is not reevaluated when the input is mutated. To avoid the need to reformat the date on every change-detection cycle, treat the date as an immutable object and change the reference when the pipe needs to run again.

Pre-defined format options

Custom format options

You can construct a format string using symbols to specify the components of a date-time value, as described in the following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale.

Format examples

These examples transform a date into various formats, assuming that dateObj is a JavaScript Date object for year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11, given in the local time for the en-US locale.

          
{{ 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:'mm:ss' }}       // output is '43:11'{{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }}  // output is 'Jun 15, 2015 at 09:43 PM'
        

Usage example

The following component uses a date pipe to display the current date in different formats.

          
@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:'h:mm a z'}}</p> </div>`})// Get the current date and time as a date-time value.export class DatePipeComponent {  today: number = Date.now();}