Angular日期选择器提交日期比实际选择早1天问题排查

核心原因：时区序列化差异 #

mat-datepicker选择的日期是本地时区的Date对象，但当表单提交时，Date对象会被自动序列化为UTC格式的字符串（比如本地选的是2024-05-20，东八区的UTC时间是2024-05-19T16:00:00.000Z）。如果后端直接解析UTC时间，就会得到比实际选择早一天的结果。控制台打印的是本地时区的日期显示，所以看起来正确，但实际表单值的Date对象内部存储的是UTC时间戳。

另外注意到你代码中的一个不一致：模板里的formControlName="chosendate"，但TS中FormGroup的控件是nextdeadline，这会导致表单控件绑定失效，需要修正为一致的名称。

解决方案 #

方案1：提交时将Date对象转为本地日期字符串 #

使用Angular内置的formatDate工具，把Date对象转换为YYYY-MM-DD格式的字符串，避免UTC序列化问题：

import { formatDate } from '@angular/common';

// 提交表单前处理值
submitForm() {
  const rawValue = this.form.value;
  const submitValue = {
    ...rawValue,
    nextdeadline: rawValue.nextdeadline 
      ? formatDate(rawValue.nextdeadline, 'yyyy-MM-dd', 'en-US') 
      : null
  };
  // 发送submitValue到后端
}

方案2：直接在FormControl中存储日期字符串 #

修改FormControl的类型为字符串，通过selectionChange事件（mat-datepicker专属事件，比input的change更可靠）转换日期：

模板修改：

<mat-form-field class="w-100">
  <mat-label>Prossima scadenza</mat-label>
  <input
    matInput
    [matDatepicker]="picker"
    [min]="minDate"
    formControlName="nextdeadline"
  />
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (selectionChange)="onDateSelected($event)"></mat-datepicker>
</mat-form-field>

TS代码修改：

import { formatDate } from '@angular/common';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';

form = new FormGroup({
  nextdeadline: new FormControl<string | null>(null),
});

onDateSelected(event: MatDatepickerInputEvent<Date>) {
  if (event.value) {
    this.form.get('nextdeadline')?.setValue(
      formatDate(event.value, 'yyyy-MM-dd', 'en-US')
    );
  }
}

补充说明 #

MAT_DATE_LOCALE仅用于控制日期的显示格式和选择器的区域化行为，无法解决Date对象的UTC序列化问题，所以必须通过上述方式显式处理日期的格式转换。

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