Angular中Datepicker日期转toISOString：后端日期少一天

问题原因 #

这是时区转换导致的日期偏移：Angular Material Datepicker返回的是本地时区（GMT+0100）的Date对象，当调用toISOString()时会自动转为UTC时间。比如你选择的Mon Nov 07 2022 00:00:00 GMT+0100，转成UTC后是Nov 06 2022 23:00:00，后端解析时如果只提取日期部分，就会变成11月6日，比选择的日期少一天。

解决方案 #

在提交表单前手动处理日期，确保转换后的日期与本地选择的一致，以下是几种实用方法：

方法1：调整UTC时间后转ISOString #

在提交函数中修改日期的UTC时间，避免时区偏移导致日期变更：

onSubmit() {
  const formData = { ...this.demandeForm.value };

  // 处理起始日期
  if (formData.From_Date) {
    const fromDate = new Date(formData.From_Date);
    // 将UTC时间设为当天12点，确保日期不偏移
    formData.From_Date = new Date(fromDate.setUTCHours(12, 0, 0, 0)).toISOString();
  }

  // 处理结束日期
  if (formData.To_Date) {
    const toDate = new Date(formData.To_Date);
    formData.To_Date = new Date(toDate.setUTCHours(12, 0, 0, 0)).toISOString();
  }

  // 提交到后端
  this.http.post('/your-api-endpoint', formData).subscribe(
    res => console.log('提交成功', res),
    err => console.error('提交失败', err)
  );
}

方法2：直接构造YYYY-MM-DD格式字符串 #

如果后端接受纯日期字符串（无需时间部分），可以直接构造目标格式：

onSubmit() {
  const formData = { ...this.demandeForm.value };

  // 格式化日期为YYYY-MM-DD
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  if (formData.From_Date) {
    formData.From_Date = formatDate(new Date(formData.From_Date));
  }

  if (formData.To_Date) {
    formData.To_Date = formatDate(new Date(formData.To_Date));
  }

  // 提交到后端
  this.http.post('/your-api-endpoint', formData).subscribe(...);
}

方法3：自定义Datepicker适配器（进阶） #

如果项目多处需要处理时区，可以自定义适配器强制统一时区：

import { NativeDateAdapter } from '@angular/material/core';

export class UtcDateAdapter extends NativeDateAdapter {
  override format(date: Date, displayFormat: Object): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  override parse(value: any): Date | null {
    if (typeof value === 'string') {
      const parts = value.split('-');
      return new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
    }
    return super.parse(value);
  }
}

然后在模块中注册适配器：

import { DateAdapter } from '@angular/material/core';

@NgModule({
  providers: [
    { provide: DateAdapter, useClass: UtcDateAdapter }
  ]
})
export class YourModule { }

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