Angular 17使用datetime-local时时间显示偏差数小时的问题排查

核心差异：字段的时区生成逻辑不同 #

• createdAt/updatedAt 表现正常的原因
  这两个字段是后端生成的UTC时间（带Z标识），比如2024-06-07T06:13:51.050Z代表UTC时间6点13分。Angular的date管道默认会将UTC时间转换为用户本地时区（印度+5:30），计算后就是07/06/2024 11:43 AM，和实际时间匹配。

• date 字段显示错误的原因
  你通过datetime-local输入选择的是印度本地时间07/06/2024 11:43 AM，但该输入框的输出是不带时区标识的本地时间字符串（如2024-06-07T11:43:00）。提交后后端错误地将这个字符串当作UTC时间存储，导致数据库中date的取值是UTC时间11点43分（即2024-06-07T11:43:00.000Z）。
  当用date管道格式化时，UTC时间11点43分加上印度时区偏移+5:30，就得到了07/06/2024 05:13 PM，也就是你看到的错误结果。

补充说明：datetime-local 输入的特性 #

datetime-local输入框仅处理本地时区的时间，不会自动添加时区标识。当你用[(ngModel)]绑定到item.date时：

• 如果item.date是字符串类型，Angular会直接传递这个本地时间字符串给后端；
• 如果是Date对象，Angular会将本地时间转换为UTC时间的ISO字符串（带Z），但显然你的后端或前端提交逻辑没有做正确转换。

解决方向 #

1. 前端处理：在提交前将datetime-local的本地时间转换为UTC时间，比如：

   // 假设item.date是datetime-local返回的字符串
   item.date = new Date(item.date).toISOString();
   

   这样后端存储的UTC时间会是正确的2024-06-07T06:13:00.000Z，前端格式化后会显示正确的本地时间。

2. 后端调整：修改后端逻辑，将前端传入的不带时区的时间字符串识别为印度时区（+5:30），再转换为UTC时间存储。

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