Angular Mat Datepicker显示日期少一天问题及解决方法求助

这个问题大多是时区解析差异导致的：接口返回的日期通常是UTC格式（带Z后缀，比如2024-05-20T00:00:00Z），而Mat Datepicker默认用本地时区解析，当本地时区为东八区等比UTC早的时区时，会把UTC的0点解析为前一天的16点（东八区），最终显示日期少一天。

以下是几种可行的解决办法：

1. 接口数据接收时直接处理日期 #

在Component中处理接口返回的FECHAREGISTRO字段，提取UTC日期的年月日，重新创建本地日期对象（忽略时区差）：

// 示例：处理接口返回的日期字符串
formatDateForPicker(dateStr: string): Date {
  const utcDate = new Date(dateStr);
  // 直接取UTC日期的年月日，创建本地日期，避免时区偏移
  return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
}

// 调用示例：接口请求完成后处理数据
this.apiService.getData().subscribe(res => {
  this.tableData = res.map(item => ({
    ...item,
    FECHAREGISTRO: this.formatDateForPicker(item.FECHAREGISTRO)
  }));
});

2. 使用自定义管道转换日期 #

创建一个专用管道，在模板中直接转换日期，避免修改Component逻辑：

// utc-to-local-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'utcToLocalDate' })
export class UtcToLocalDatePipe implements PipeTransform {
  transform(dateStr: string): Date | null {
    if (!dateStr) return null;
    const utcDate = new Date(dateStr);
    return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
  }
}

在模块中声明管道后，在HTML模板中使用：

<mat-datepicker #picker></mat-datepicker>
<input 
  matInput 
  [matDatepicker]="picker" 
  [value]="row.FECHAREGISTRO | utcToLocalDate"
>

3. 全局配置Datepicker使用UTC时区（谨慎使用） #

如果业务要求所有Datepicker都显示UTC日期，可以全局配置时区：

// 在你的模块（比如AppModule）中添加配置
import { MAT_DATE_LOCALE } from '@angular/material/datepicker';
import { provideNativeDateAdapter } from '@angular/material/core';

@NgModule({
  providers: [
    provideNativeDateAdapter(),
    { provide: MAT_DATE_LOCALE, useValue: 'UTC' }
  ]
})
export class AppModule {}

注意：此配置会影响项目中所有Mat Datepicker的行为，仅当业务逻辑要求统一使用UTC时区时才推荐。

另外需要排查：如果接口返回的是不带时间的纯日期字符串（比如2024-05-20），部分浏览器会将其解析为本地时区的前一天20:00（东八区），此时同样可以用上面的方法提取年月日重新创建Date对象。

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