填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

DatePipe

根據區域設定規則格式化日期值。

Formats a date value according to locale rules.

檢視"說明"...

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
      
      {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
    

NgModule

輸入值

value string | number | Date

引數

format string
可選. 預設值是 `'mediumDate'`.
timezone string
可選. 預設值是 `undefined`.
locale string
可選. 預設值是 `undefined`.

參見

說明

Angular 只自帶了 en-US 區域的資料。要想在其它語言中對日期進行本地化,你必須匯入相應的區域資料。 欲知詳情,參見 I18n guide

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 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

下面是 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).

自訂格式選項

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.

欄位型別Field type格式Format說明Description範例值Example Value
紀元EraG, GG & GGG縮略AbbreviatedAD
GGGG全稱WideAnno Domini
GGGGG最簡NarrowA
Yeary數字Numeric:最小位數minimum digits2, 20, 201, 2017, 20173
yy數字Numeric: 2數字 + 0 補位digits + zero padded02, 20, 01, 17, 73
yyy數字Numeric: 3數字 + 0 補位digits + zero padded002, 020, 201, 2017, 20173
yyyy數字Numeric: 4或更多數字 + 0 補位digits or more + zero padded0002, 0020, 0201, 2017, 20173

週日歷年

Week-numbering year

Y

數字: 最少化數字

Numeric: minimum digits

2, 20, 201, 2017, 20173
YY

數字:2 字元+補零

Numeric: 2 digits + zero padded

02, 20, 01, 17, 73
YYY

數字:3 字元+補零

Numeric: 3 digits + zero padded

002, 020, 201, 2017, 20173
YYYY

數字:4 字元+補零

Numeric: 4 digits or more + zero padded

0002, 0020, 0201, 2017, 20173
MonthM數字Numeric:1 數字1 digit9, 12
MM數字Numeric: 2數字 + 0 補位digits + zero padded09, 12
MMM縮略AbbreviatedSep
MMMM全稱WideSeptember
MMMMM最簡NarrowS
獨立月份Month standaloneL數字Numeric:1 數字1 digit9, 12
LL數字Numeric: 2數字 + 0 補位digits + zero padded09, 12
LLL縮略AbbreviatedSep
LLLL全稱WideSeptember
LLLLL最簡NarrowS
年內周次Week of yearw數字Numeric:最小位數minimum digits1... 53
ww數字Numeric: 2數字 + 0 補位digits + zero padded01... 53
月內周次Week of monthW數字Numeric:1 數字1 digit1... 5
月內日Day of monthd數字Numeric:最小位數minimum digits1
dd數字Numeric: 2數字 + 0 補位digits + zero padded01
周內日Week dayE, EE & EEE縮略AbbreviatedTue
EEEE全稱WideTuesday
EEEEE最簡NarrowT
EEEEEEShortTu
日內時段Perioda, aa & aaa縮略Abbreviatedam/pm or AM/PM
aaaa全稱Wide(缺少時等同於 a)(fallback to a when missing)ante meridiem/post meridiem
aaaaa最簡Narrowa/p
日內時段Period*B, BB & BBB縮略Abbreviatedmid.
BBBB全稱Wideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBB最簡Narrowmd
獨立時段Period standalone*b, bb & bbb縮略Abbreviatedmid.
bbbb全稱Wideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbb最簡Narrowmd
小時(1-12)Hour 1-12h數字Numeric:最小位數minimum digits1, 12
hh數字Numeric: 2數字 + 0 補位digits + zero padded01, 12
小時(0-23)Hour 0-23H數字Numeric:最小位數minimum digits0, 23
HH數字Numeric: 2數字 + 0 補位digits + zero padded00, 23
Minutem數字Numeric:最小位數minimum digits8, 59
mm數字Numeric: 2數字 + 0 補位digits + zero padded08, 59
Seconds數字Numeric:最小位數minimum digits0... 59
ss數字Numeric: 2數字 + 0 補位digits + zero padded00... 59
分數秒Fractional secondsS數字Numeric:1 數字1 digit0... 9
SS數字Numeric: 2數字 + 0 補位digits + zero padded00... 99
SSS數字Numeric: 3數字 + 0 補位digits + zero padded(=毫秒milliseconds)000... 999
時區Zonez, zz & zzz位置無關短格式(預設為 0)Short specific non location format (fallback to O)GMT-8
zzzz位置無關長格式(預設為 0000)Long specific non location format (fallback to OOOO)GMT-08:00
Z, ZZ & ZZZISO8601基本格式basic format-0800
ZZZZ本地化 GMT 長格式Long localized GMT formatGMT-8:00
ZZZZZISO8601擴充套件格式 + 偏移為 0 時用 Z 表示extended format + Z indicator for offset 0(= XXXXX)-08:00
O, OO & OOO本地化 GMT 短格式Short localized GMT formatGMT-8
OOOO本地化 GMT 長格式Long localized GMT formatGMT-08:00

請注意,時區校正不適用於沒有時間部分的 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"

格式範例

Format examples

下面這些例子會把日期轉換成多種格式。 這裡假設 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.

{{ 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 }}               // 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'
    

使用範例

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