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

我使用Angular Material日期范围选择器时，选择日期后输入框显示正确，但保存时组件会发送所选日期的前一天。相关代码如下：

HTML代码 #

<mat-form-field appearance="fill">
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input  [rangePicker]="picker" separator="to" required [min]="today" [dateFilter]="dateFilterFn">
        <input matStartDate formControlName="From_Date" placeholder="From_Date" name="From_Date">
        <input matEndDate formControlName="To_Date" placeholder="To_Date" name="To_Date">
      </mat-date-range-input>
       <mat-hint>DD/MM/YYYY – DD/MM/YYYY </mat-hint>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

TS代码 #

this.demandeForm = this.formBuilder.group({
  From_Date: ['',Validators.required],
 To_Date :['',Validators.required],
  Created_AT : [this.created_AT,Validators.required],
  nmbJours : ['',Validators.required]
})

原因分析 #

这是典型的时区差异问题：Angular Material的日期选择器默认会将选中的本地日期转换为UTC时间戳，当后端或保存逻辑直接使用这个UTC时间转换为日期时，就会出现显示日期比实际选择日期早一天的情况（比如你在东八区选择2024-05-20，UTC时间会是2024-05-19T16:00:00Z，后端解析时可能会得到2024-05-19）。

解决方法 #

方法1：配置DateAdapter使用本地时区

在项目模块文件（如app.module.ts）中自定义DateAdapter，强制使用本地时区处理日期：

import { MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { NativeDateAdapter } from '@angular/material/core';

export class LocalDateAdapter extends NativeDateAdapter {
  override format(date: Date, displayFormat: Object): string {
    // 匹配你的显示格式：DD/MM/YYYY
    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}`;
  }

  override parse(value: any): Date | null {
    if (typeof value === 'string') {
      const parts = value.split('/');
      if (parts.length === 3) {
        // 解析本地日期，避免时区偏移
        return new Date(+parts[2], +parts[1] - 1, +parts[0]);
      }
    }
    return super.parse(value);
  }
}

// 自定义日期格式，匹配组件的显示要求
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  // ...其他模块配置
  providers: [
    { provide: DateAdapter, useClass: LocalDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }, // 根据你的地区调整，比如'zh-CN'
  ],
})
export class AppModule { }

方法2：提交时手动转换为本地日期字符串

在表单提交前，将日期转换为不带时区的本地日期格式：

onSubmit() {
  if (this.demandeForm.invalid) return;

  // 处理开始日期：转换为本地日期的ISO字符串（YYYY-MM-DD）
  const fromDate = this.demandeForm.get('From_Date')?.value as Date;
  const formattedFrom = new Date(fromDate.getTime() - fromDate.getTimezoneOffset() * 60000)
    .toISOString()
    .split('T')[0];

  // 处理结束日期
  const toDate = this.demandeForm.get('To_Date')?.value as Date;
  const formattedTo = new Date(toDate.getTime() - toDate.getTimezoneOffset() * 60000)
    .toISOString()
    .split('T')[0];

  // 构造提交数据
  const submitData = {
    ...this.demandeForm.value,
    From_Date: formattedFrom,
    To_Date: formattedTo,
  };

  // 发送请求到后端
  // this.http.post('/your-api-endpoint', submitData).subscribe(...);
}

方法3：初始化时重置日期时间为本地0点

在设置today或其他日期值时，重置时间部分为0点，避免时区偏移影响：

// 初始化today
this.today = new Date();
this.today.setHours(0, 0, 0, 0); // 确保是本地时间的当天0点

// 如果从后端获取日期并赋值给表单
const backendFromDate = '2024-05-20';
this.demandeForm.get('From_Date')?.setValue(new Date(`${backendFromDate}T00:00:00`));

验证 #

修改后可以在提交前打印表单值，确认日期是否正确：

console.log('提交的开始日期:', this.demandeForm.value.From_Date);

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