Angular医疗应用MatDatePicker提交日期差一天问题求助

我正在开发一款医疗类Angular应用，使用Angular Material的MatDatePicker组件，代码如下：

<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
    <mat-form-field class="example-full-width" appearance="outline">
        <mat-label>Follow up Consultation</mat-label>
        <input matInput [matDatepicker]="picker"  
               formControlName="consultationDate">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>

选择日期时显示正常，但点击提交订单按钮后，后端或前端显示的日期总是比选中日期早一天，求解决方法。

解决方法 #

这种问题几乎都是时区转换导致的：MatDatePicker默认以本地时区生成Date对象，但当你将日期传给后端或格式化输出时，会因为UTC时区的转换规则出现日期偏移。以下是几种可行的解决方式：

1. 全局配置UTC时区的DateAdapter #

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

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

// 自定义UTC日期适配器
class UtcDateAdapter extends NativeDateAdapter {
  override parse(value: any): Date | null {
    if (typeof value === 'string') {
      // 以UTC时间0点解析日期字符串
      return new Date(value + 'T00:00:00Z');
    }
    return super.parse(value);
  }

  override format(date: Date, displayFormat: Object): string {
    // 按UTC取年月日，格式化为YYYY-MM-DD
    const day = date.getUTCDate();
    const month = date.getUTCMonth() + 1;
    const year = date.getUTCFullYear();
    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  }
}

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

@NgModule({
  imports: [
    // ...其他模块导入
    MatDatepickerModule,
    MatNativeDateModule
  ],
  providers: [
    { provide: DateAdapter, useClass: UtcDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppModule { }

2. 提交表单时手动转换为UTC日期 #

如果不需要全局配置，可以在提交逻辑里手动将选中日期转换为UTC时间的0点：

onSubmit() {
  const selectedDate = this.yourForm.get('consultationDate')?.value;
  if (selectedDate) {
    // 创建UTC日期对象，确保时间为00:00:00
    const utcDate = new Date(Date.UTC(
      selectedDate.getFullYear(),
      selectedDate.getMonth(),
      selectedDate.getDate()
    ));
    // 转换为YYYY-MM-DD格式后传给后端
    this.submitData.consultationDate = utcDate.toISOString().split('T')[0];
  }
  // 执行提交逻辑
}

3. 使用MomentDateAdapter处理时区 #

如果项目已引入moment.js，可以使用Angular Material的Moment适配器来更灵活地处理时区：
首先安装依赖：

npm install @angular/material-moment-adapter moment --save

然后在根模块配置：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  imports: [
    // ...其他模块导入
    MatDatepickerModule
  ],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
    // 开启UTC模式
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ],
})
export class AppModule { }

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