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 GMT+1)。

  '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 9:03:01 AM GMT+01:00)。

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