为什么Angular的date pipe会自动减一天？如何设置使其显示正确日期？

问题根因 #

这个问题不是00:00时间点导致的异常，核心是时区转换逻辑导致的：

• 你传入的时间字符串末尾的Z代表该时间是UTC（零时区）时间，对应标准时间为2021-09-30 00:00 零时区时间
• Angular的date pipe默认会使用用户设备的本地时区来处理时间，如果你处于东八区（UTC+8，国内通用时区），这个时间换算成本地时间就是2021-09-29 16:00，因此格式化后就会显示为2021-09-29

解决方案 #

方案1：单次使用时指定时区参数 #

date pipe支持传入第三个参数作为时区配置，直接指定为UTC即可按原时间格式化：

{{"2021-09-30T00:00:00Z" | date: "yyyy-MM-dd": "UTC"}}

如果需要固定用其他时区，也可以传入对应时区标识，比如东八区可以传'GMT+8'或者'Asia/Shanghai'。

方案2：全局配置默认时区 #

如果项目内所有date pipe都需要默认使用UTC时区，不需要转本地时区，可以在根模块的providers中添加全局配置：
首先从@angular/common导入DATE_PIPE_DEFAULT_OPTIONS，然后在providers数组中添加：

{
  provide: DATE_PIPE_DEFAULT_OPTIONS,
  useValue: { timezone: 'UTC' }
}

配置完成后所有默认调用date pipe的地方都会自动使用UTC时区处理时间，不需要每次额外传参数。

内容的提问来源于stack exchange，提问作者WenliL