Angular 6中matDatepicker显示本地时间而非UTC偏移的问题求助

不升级Angular的可行方案 #

1. 自定义本地日期管道（解决moment导入及转换问题） #

先确保正确安装moment依赖：

npm install moment --save

创建自定义管道LocalDatePipe，处理UTC到本地时间的转换：

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'localDate' })
export class LocalDatePipe implements PipeTransform {
  transform(value: string | Date): string {
    if (!value) return '';
    // 将输入的日期字符串转换为本地时间格式
    return moment(value).format('MM/DD/YYYY HH:mm:ss');
  }
}

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

<mat-form-field>
  <input matInput [matDatepicker]="picker" [value]="dateValue | localDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

2. 提前格式化数据（绕过displayedColumns数组操作问题） #

在组件获取数据后，直接为每条数据添加格式化后的日期字段，避免操作原始数组字符串：

// 假设data是从接口获取的原始数据数组
this.data.forEach(item => {
  // 将原始日期字符串转为本地时间格式的字符串
  item.formattedDate = moment(item.date).format('MM/DD/YYYY HH:mm:ss');
});

之后在displayedColumns中使用formattedDate字段，模板中直接绑定该字段即可。

3. 适配版本配置Material Moment Adapter #

Angular 6需要安装对应版本的适配器，避免版本不兼容错误：

npm install @angular/material-moment-adapter@6.x --save

在模块中配置日期适配器和格式：

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

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

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class DatePickerModule {}

配置完成后，matDatepicker会按照指定格式显示本地时间，不再出现UTC偏移。

升级Angular版本的建议 #

Angular 6已停止官方维护，若上述方案均无法解决问题，升级到Angular 8.x及以上版本是更彻底的方案：

1. 升级Angular CLI到对应版本：

npm install @angular/cli@8.x --save-dev

2. 升级核心框架和Material组件：

ng update @angular/core@8 @angular/material@8

升级过程中需注意处理第三方依赖（如moment）的版本兼容问题，升级后matDatepicker的UTC时间问题大概率会被官方修复。

内容的提问来源于stack exchange，提问作者Jamie Grant Batchelor