Angular表单[ngModel]日期绑定时提交出现差1天错误如何解决？

问题原因 #

这个是时区偏移不匹配导致的典型问题：

• HTML原生type="date"输入框的ngModelChange返回值是yyyy-MM-dd格式的字符串，默认对应UTC时区0点的日期
• 直接将该字符串赋值给Date类型的dateOfBirth时，浏览器会按用户本地时区解析，若你所在时区比UTC晚（比如国内UTC+8），UTC 7月4日0点对应本地时间为7月3日16点，存储到MongoDB后回显自然就少了一天

解决方案 #

步骤1：在组件类中新增日期转换方法 #

// 组件类代码
onDateChange(selectedDateStr: string) {
  // 手动拆分年月日按本地时区构造Date，避开UTC偏移问题
  const [year, month, day] = selectedDateStr.split('-').map(Number);
  this.user.dateOfBirth = new Date(year, month - 1, day);
}

步骤2：修改模板绑定逻辑 #

<input
   class="form-control"
   id="dateOfBirth"
   type="date"
   name="dateOfBirth"
   placeholder="date"
   [ngModel]="user.dateOfBirth | date: 'yyyy-MM-dd'"
   (ngModelChange)="onDateChange($event)"
/>

这样处理后，存储到MongoDB的日期会完全匹配你选中的本地日期，不会再出现差1天的问题。

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