API 参考手册
API > @angular/common

DeprecatedDatePipe

Formats a date according to locale rules.

查看"说明"...

{{ value_expression | date [ : pattern ] }}
      
      {{ value_expression | date [ : pattern ] }}

NgModule

输入值

value any

参数

pattern string

可选. 默认值是 'mediumDate'.

说明

Where:

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

  • format indicates which date/time components to include. The format can be predefined as shown below or custom as shown in the table.

    • 'medium': equivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
    • 'short': equivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US)
    • 'fullDate': equivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)
    • 'longDate': equivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US)
    • 'mediumDate': equivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)
    • 'shortDate': equivalent to 'yMd' (e.g. 9/3/2010 for en-US)
    • 'mediumTime': equivalent to 'jms' (e.g. 12:05:08 PM for en-US)
    • 'shortTime': equivalent to 'jm' (e.g. 12:05 PM for en-US)
ComponentSymbolNarrowShort FormLong FormNumeric2-digit
eraGG (A)GGG (AD)GGGG (Anno Domini)--
yeary---y (2015)yy (15)
monthML (S)MMM (Sep)MMMM (September)M (9)MM (09)
dayd---d (3)dd (03)
weekdayEE (S)EEE (Sun)EEEE (Sunday)--
hourj---j (13)jj (13)
hour12h---h (1 PM)hh (01 PM)
hour24H---H (13)HH (13)
minutem---m (5)mm (05)
seconds---s (9)ss (09)
timezonez--z (Pacific Standard Time)--
timezoneZ-Z (GMT-8:00)---
timezonea-a (PM)---

In javascript, only the components specified will be respected (not the ordering, punctuations, ...) and details of the formatting will be dependent on the locale.

Timezone of the formatted text will be the local system timezone of the end-user's machine.

When the expression is a ISO string without time (e.g. 2016-09-19) the time zone offset is not applied and the formatted text will have the same day, month and year of the expression.

WARNINGS:

  • this pipe is marked as pure hence it will not be re-evaluated when the input is mutated. Instead users should treat the date as an immutable object and change the reference when the pipe needs to re-run (this is to avoid reformatting the date on every change detection run which would be an expensive operation).
  • this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.

使用说明

Examples

Assuming dateObj is (year: 2010, month: 9, day: 3, hour: 12 PM, minute: 05, second: 08) in the local time and locale is 'en-US':

@Component({ selector: 'deprecated-date-pipe', template: `<div> <!--output 'Sep 3, 2010'--> <p>Today is {{today | date}}</p> <!--output 'Friday, September 3, 2010'--> <p>Or if you prefer, {{today | date:'fullDate'}}</p> <!--output '12:05 PM'--> <p>The time is {{today | date:'shortTime'}}</p> <!--output '2010-09-03 12:05 PM'--> <p>The custom date is {{today | date:'yyyy-MM-dd HH:mm a'}}</p> </div>` }) export class DeprecatedDatePipeComponent { today = Date.now(); }
      
      
  1. @Component({
  2.   selector: 'deprecated-date-pipe',
  3.   template: `<div>
  4.     <!--output 'Sep 3, 2010'-->
  5.     <p>Today is {{today | date}}</p>
  6.  
  7.     <!--output 'Friday, September 3, 2010'-->
  8.     <p>Or if you prefer, {{today | date:'fullDate'}}</p>
  9.  
  10.     <!--output '12:05 PM'-->
  11.     <p>The time is {{today | date:'shortTime'}}</p>
  12.  
  13.     <!--output '2010-09-03 12:05 PM'-->
  14.     <p>The custom date is {{today | date:'yyyy-MM-dd HH:mm a'}}</p>
  15.   </div>`
  16. })
  17. export class DeprecatedDatePipeComponent {
  18.   today = Date.now();
  19. }