Angular中DatePipe在移动端显示小时异常问题咨询

这个问题我之前排查过类似的，核心原因是不带时区标识的日期字符串，在不同JS运行环境里的解析逻辑不一样：

• 你用的日期字符串是2018-04-02T06:00:00，末尾没有时区标记（比如Z代表UTC，或者+03:00这种偏移量）。Mac上的浏览器（比如Chrome、Safari）会默认把这个字符串当成本地时区的时间来解析，所以格式化后直接显示06:00。
• 而iOS的Safari（包括模拟器）遵循的解析规则更严格，会把这种不带时区的字符串默认当成UTC时间处理。假设你所在的时区是UTC+3，那UTC的06:00转换成本地时区就是09:00，刚好和你看到的差3小时。

另外Angular的DatePipe默认是使用当前环境的本地时区来格式化，但前提是输入的Date对象是一致的——如果两端解析出来的Date对象本身就对应不同的时间点，那格式化结果肯定不一样。

针对这个问题，你可以用这几个方法统一显示结果：

• 明确指定时区格式化：在DatePipe里加上时区参数。如果你的原始日期是UTC时间，就直接指定UTC时区：

  {{ yourDate | date : 'short' : 'UTC' }}
  

  如果原始日期是本地时间，就明确指定本地时区（空字符串代表本地）：

  {{ yourDate | date : 'short' : '' }}
  

• 统一日期解析逻辑：不要直接把字符串传给DatePipe，先手动解析成Date对象，消除歧义。比如如果原始日期是UTC时间，就在字符串末尾加Z：

  const parsedDate = new Date('2018-04-02T06:00:00Z');
  

  或者用Date.UTC()来构建日期，确保各端解析结果一致。
• 检查设备时区设置：虽然模拟器也出现这个问题，但可以确认下iOS设备/模拟器的时区是否和Mac一致，排除手动设置的差异。

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