当前位置： 正文

Angular教程 – 内置pipe 管道：date日期格式化转换

Angular 2021-07-24

Angular教程 - 内置pipe 管道：date日期格式化转换

根据区域设定规则格式化日期值，在JS原本写日期有点琐碎，但通过这个datePipe让日期变得更简单，而且还可以无痛转换地区，真是太棒了。

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

官方文档地址：点击跳转

  • date：JS 的 Date 物件。
  • format：要包含的日期、时间部分的格式，预设值是 mediumDate。
  • timezone：预设为本地端的时间，也就是如果我们中国 都是北京时间，加上 ‘+08’ 代码，会在格林威治标准时间加上8小时。
  • 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).

HTML

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

TS

today = Date.now();

到这里就完成了，很简单，你学会了？不会请留言

赏