Angular Material日期范围选择器保存日期提前一天问题

问题原因 #

这是时区偏移导致的：Angular Material日期选择器默认会将选中的本地日期转换为UTC时间存储，但如果你的后端或保存逻辑是按本地日期处理，就会出现「输入框显示正确日期，但提交时实际是前一天」的差异。

代码错误分析 #

你当前的代码存在两个关键问题：

1. 表单初始化时，From_Date:[this.From_Datee]是把函数本身作为控件初始值，而非调用函数返回的日期值，这会导致控件值异常。
2. From_Datee函数的时区偏移处理逻辑错误：getTimezoneOffset()返回本地时间与UTC的分钟差（比如东八区返回-480），你用加法操作会让日期进一步偏移，反而加重问题。

解决方法 #

1. 修正表单初始化与日期处理函数 #

先修复初始值绑定和时区转换逻辑：

// 修正时区转换函数：将本地日期转为UTC日期，保证日期部分一致
public adjustDate(date: Date): Date {
  const d = new Date(date);
  // 减去时区偏移，把本地时间调整为对应UTC日期的0点
  d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
  return d;
}

ngOnInit(): void {
  const today = new Date();
  this.demandeForm = this.formBuilder.group({
    // 正确调用函数，传入初始日期（比如今天）
    From_Date: [this.adjustDate(today), Validators.required],
    To_Date: ['', Validators.required],
    Created_AT: [this.created_AT, Validators.required],
    nmbJours: ['', Validators.required],
    alternate: [''],
    details: [''],
    status: ['En Cours'],
    reason: [''],
    employeeId: ['', Validators.required],
    typecongesId: ['', Validators.required]
  })
}

2. 提交表单时统一处理日期 #

在提交表单前，对选中的开始/结束日期做时区修正，确保提交的日期与显示一致：

onSubmit() {
  if (!this.demandeForm.valid) return;

  const formData = { ...this.demandeForm.value };
  
  // 处理开始日期
  if (formData.From_Date) {
    formData.From_Date = this.adjustDate(new Date(formData.From_Date));
  }
  // 处理结束日期
  if (formData.To_Date) {
    formData.To_Date = this.adjustDate(new Date(formData.To_Date));
  }

  // 执行保存操作（调用API/存储逻辑）
  // yourSaveLogic(formData);
}

3. 全局配置日期适配器（可选） #

如果希望所有日期选择器都直接按本地日期处理，无需每次手动转换，可以自定义DateAdapter全局配置：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule, NativeDateAdapter } from '@angular/material/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';

class LocalDateAdapter extends NativeDateAdapter {
  // 解析输入的日期字符串，直接按本地日期处理
  override parse(value: any): Date | null {
    if (typeof value === 'string' && value.includes('/')) {
      const [day, month, year] = value.split('/').map(Number);
      return new Date(year, month - 1, day);
    }
    return super.parse(value);
  }

  // 按指定格式显示日期
  override format(date: Date, displayFormat: any): string {
    if (displayFormat === 'input') {
      const day = date.getDate().toString().padStart(2, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const year = date.getFullYear();
      return `${day}/${month}/${year}`;
    }
    return super.format(date, displayFormat);
  }
}

// 自定义日期格式
const LOCAL_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'YYYY MMM',
    dateA11yLabel: 'DD/MM/YYYY',
    monthYearA11yLabel: 'YYYY MMMM',
  },
};

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
  providers: [
    { provide: DateAdapter, useClass: LocalDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: LOCAL_DATE_FORMATS }
  ]
})
export class MaterialDateModule { }

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