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

DatePipe

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

Formats a date value according to locale rules.

檢視"說明"...

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

Exported from

輸入值

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.

Further information available in the 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

OptionEquivalent toExamples (given in en-US locale)
'short''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
'long''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
'shortDate''M/d/yy'6/15/15
'mediumDate''MMM d, y'Jun 15, 2015
'longDate''MMMM d, y'June 15, 2015
'fullDate''EEEE, MMMM d, y'Monday, June 15, 2015
'shortTime''h:mm a'9:03 AM
'mediumTime''h:mm:ss a'9:03:01 AM
'longTime''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': 等價於 '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 typeFormatDescriptionExample Value
EraG, GG & GGGAbbreviatedAD
GGGGWideAnno Domini
GGGGGNarrowA
YearyNumeric: minimum digits2, 20, 201, 2017, 20173
yyNumeric: 2 digits + zero padded02, 20, 01, 17, 73
yyyNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
yyyyNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
Week-numbering yearYNumeric: minimum digits2, 20, 201, 2017, 20173
YYNumeric: 2 digits + zero padded02, 20, 01, 17, 73
YYYNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
YYYYNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
MonthMNumeric: 1 digit9, 12
MMNumeric: 2 digits + zero padded09, 12
MMMAbbreviatedSep
MMMMWideSeptember
MMMMMNarrowS
Month standaloneLNumeric: 1 digit9, 12
LLNumeric: 2 digits + zero padded09, 12
LLLAbbreviatedSep
LLLLWideSeptember
LLLLLNarrowS
Week of yearwNumeric: minimum digits1... 53
wwNumeric: 2 digits + zero padded01... 53
Week of monthWNumeric: 1 digit1... 5
Day of monthdNumeric: minimum digits1
ddNumeric: 2 digits + zero padded01
Week dayE, EE & EEEAbbreviatedTue
EEEEWideTuesday
EEEEENarrowT
EEEEEEShortTu
Week day standalonec, ccNumeric: 1 digit2
cccAbbreviatedTue
ccccWideTuesday
cccccNarrowT
ccccccShortTu
Perioda, aa & aaaAbbreviatedam/pm or AM/PM
aaaaWide (fallback to a when missing)ante meridiem/post meridiem
aaaaaNarrowa/p
Period*B, BB & BBBAbbreviatedmid.
BBBBWideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBBNarrowmd
Period standalone*b, bb & bbbAbbreviatedmid.
bbbbWideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbbNarrowmd
Hour 1-12hNumeric: minimum digits1, 12
hhNumeric: 2 digits + zero padded01, 12
Hour 0-23HNumeric: minimum digits0, 23
HHNumeric: 2 digits + zero padded00, 23
MinutemNumeric: minimum digits8, 59
mmNumeric: 2 digits + zero padded08, 59
SecondsNumeric: minimum digits0... 59
ssNumeric: 2 digits + zero padded00... 59
Fractional secondsSNumeric: 1 digit0... 9
SSNumeric: 2 digits + zero padded00... 99
SSSNumeric: 3 digits + zero padded (= milliseconds)000... 999
Zonez, zz & zzzShort specific non location format (fallback to O)GMT-8
zzzzLong specific non location format (fallback to OOOO)GMT-08:00
Z, ZZ & ZZZISO8601 basic format-0800
ZZZZLong localized GMT formatGMT-8:00
ZZZZZISO8601 extended format + Z indicator for offset 0 (= XXXXX)-08:00
O, OO & OOOShort localized GMT formatGMT-8
OOOOLong localized GMT formatGMT-08:00

請注意,時區校正不適用於沒有時間部分的 ISO 字串,例如“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'
    

使用範例

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