填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

DatePipe

根据区域设置规则格式化日期值。

Formats a date value according to locale rules.

查看"说明"...

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

NgModule

输入值

value any

日期表达式:Date 对象、数字(从 UTC 时代以来的毫秒数)或一个 ISO 字符串 (https://www.w3.org/TR/NOTE-datetime)。

The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime).

参数

format string

要包含的日期、时间部分的格式,使用预定义选项或自定义格式字符串。

The date/time components to include, using predefined options or a custom format string.

可选. 默认值是 'mediumDate'.

timezone string

一个时区偏移(比如'+0430')或标准的 UTC/GMT 或美国大陆时区的缩写。默认为最终用户机器上的本地系统时区。

A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. Default is the local system timezone of the end-user's machine.

可选. 默认值是 undefined.

locale string

要使用的区域格式规则的区域代码。 如果不提供,就使用 LOCALE_ID 的值,默认为 en-US。 参见设置应用的区域

A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See Setting your app locale.

可选. 默认值是 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

    '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).

自定义格式选项

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
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:'mmss' }} // 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:'mmss' }}        // 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(); }
      
      
  1. @Component({
  2. selector: 'date-pipe',
  3. template: `<div>
  4. <p>Today is {{today | date}}</p>
  5. <p>Or if you prefer, {{today | date:'fullDate'}}</p>
  6. <p>The time is {{today | date:'h:mm a z'}}</p>
  7. </div>`
  8. })
  9. // Get the current date and time as a date-time value.
  10. export class DatePipeComponent {
  11. today: number = Date.now();
  12. }