DatePipe

Usage notes

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

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 following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale.

Note that timezone correction is not applied to an ISO string that has no time component, such as "2016-09-19"

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.

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

Usage example

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

      
        content_copy
      
      
@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();
}