DatePipelink

使用说明link

当输入值发生变化时，该管道的结果并不会改变。如果不想在每个变更检测周期中都强制重新格式化该日期，请把日期看做一个不可变对象， 当需要让该管道重新运行时，请赋给它一个新的对象，以更改它的引用。

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.

预定义的格式选项link

Pre-defined format optionslink

下面是 en-US 区域的例子。

Examples are given in en-US locale.

• 'short': 等价于 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).

  'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).

• 'medium': 等价于 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).

  'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).

• 'long': 等价于 'MMMM d, y, h:mm:ss a z' (`June 15, 2015 at 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': 等价于 'EEEE, MMMM d, y, h:mm:ss a zzzz' (`Monday, June 15, 2015 at

  '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': 等价于 'M/d/yy' (6/15/15).

  'shortDate': equivalent to 'M/d/yy' (6/15/15).

• 'mediumDate': 等价于 'MMM d, y' (Jun 15, 2015).

  'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).

• 'longDate': 等价于 'MMMM d, y' (June 15, 2015).

  'longDate': equivalent to 'MMMM d, y' (June 15, 2015).

• 'fullDate': 等价于 'EEEE, MMMM d, y' (Monday, June 15, 2015).

  'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).

• 'shortTime': 等价于 'h:mm a' (9:03 AM).

  'shortTime': equivalent to 'h:mm a' (9:03 AM).

• 'mediumTime': 等价于 'h:mm:ss a' (9:03:01 AM).

  'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).

• 'longTime': 等价于 'h:mm:ss a z' (9:03:01 AM GMT+1).

  'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).

• 'fullTime': 等价于 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

  'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

自定义格式选项link

Custom format optionslink

你可以使用符号来构造出格式字符串，以指定日期-时间值的各个部分，如下表所示。 具体格式取决于区域设置。 标 * 的字段表示仅在特定区域的数据中才有效。

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.

请注意，时区校正不适用于没有时间部分的ISO字符串，例如“2016-09-19”

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

格式范例link

Format exampleslink

下面这些例子会把日期转换成多种格式。 这里假设 dateObj 是个 JavaScript 的 Date 对象： 2015 年 6 月 15 日 21 时 43 分 11 秒， 使用的是 en-US 区域的当地时间。

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:'mm:ss' }}       // output is '43:11'
    

使用范例link

Usage examplelink

下列组件借助一个日期管道来以不同的格式显示当前日期。

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