如何基于时区在matInput日期输入控件中正确显示当前日期

问题根因 #

你当前的代码存在3个核心错误，共同导致了时区解析偏差、日期显示为前一天的问题：

• 模板中的startAt使用了字符串绑定，没有正确绑定到组件的CalendarDate变量
• 组件中CalendarDate被错误赋值为subscribe的订阅对象，而非实际的时区日期值
• SelectedDate被赋值为格式化后的字符串，mat-datepicker解析字符串时默认使用用户本地时区，和你指定的时区产生时差，最终出现日期差一天的问题

修正步骤 #

1. 修正模板属性绑定 #

把startAt="CalendarDate"改为带方括号的属性绑定，才能正确读取组件变量的值：

<input matInput [matDatepicker]="picker" [(ngModel)]="SelectedDate" [min]="minDate" [startAt]="CalendarDate" (dateChange)="getByDate()" readonly="readonly">
<mat-datepicker #picker [(ngModel)]="SelectedDate"></mat-datepicker>

2. 修正组件日期赋值逻辑 #

删除错误的CalendarDate = this.calDate赋值，在时区接口的回调里给两个日期变量赋值，且不要转成字符串，直接保留Date对象：

this.CommonService.GetDateTimeByTimeZone().subscribe(tz => {
  this.timezoneDate = tz;
  // 指定时区偏移，避免时区转换偏差，以东八区为例偏移量为480分钟
  const targetDate = moment(this.timezoneDate).utcOffset(480, true).toDate();
  this.SelectedDate = targetDate;
  this.CalendarDate = targetDate;
});

3. 全局统一时区配置（可选） #

如果整个项目的日期组件都需要使用指定时区，可在根模块的providers中添加全局配置，避免每个组件单独处理：

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@NgModule({
  providers: [
    {
      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
      useValue: { useUtc: true } // 按需调整为你需要的时区规则
    }
  ]
})

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