Ionic 6 ion-datetime绑定UTC日期时选择器时间显示错误求助

问题根因 #

Ionic 6 新版ion-datetime对带Z后缀的UTC标准ISO时间，会自动按用户当前本地时区做偏移解析。
当前场景中，接口返回的2022-06-30T11:11:54.000Z是UTC时间，对应数据库存储的东八区时间2022-06-30 13:11:54。Angular的date管道默认按本地时区渲染，所以输入框显示的13:11符合预期；但直接将带Z的UTC字符串通过new Date().toISOString()赋值给表单控件时，ion-datetime内部时区解析和表单值的时区基准不匹配，就会出现弹窗内时间比实际值差2小时（东八区与UTC的固定时差）的问题。

问题现象参考 #

可直接运行的修复实现 #

1. 接口返回时间赋值逻辑修正 #

替换原有.ts文件中给callDate控件赋值的代码，将UTC时间转换为不带时区标识的本地ISO格式后再赋值，避免组件二次时区转换：

if (data.callDate == null) {
  this.formEdit.controls.callDate.setValue(null);
} else {
  const utcDate = new Date(data.callDate);
  // 抵消时区偏移，生成本地时间对应的ISO字符串，移除末尾代表UTC的Z标识
  const localISOTime = new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000)
    .toISOString()
    .slice(0, -1);
  this.formEdit.controls.callDate.setValue(localISOTime);
}

2. 模板代码适配 #

原有模板逻辑基本可用，无需大幅改动，保持如下写法即可，不要额外给ion-datetime添加时区配置项：

<ion-item>
  <ion-label color="primary" position="stacked">{{ 'CHECK_IN.CALL_DATE' | translate }}</ion-label>
  <ion-buttons slot="end">
    <ion-button (click)="setNow('callDate')">
      <ion-icon name="calendar"></ion-icon>
    </ion-button>
    <ion-button (click)="setNull('callDate')">
      <ion-icon name="close-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-input 
    value="{{ formEdit.controls['callDate'].value | date: 'dd/MM/yyyy HH:mm' }}" 
    id="triggerCallDate"
    class="ion-text-end">
  </ion-input>
  <ion-popover id="popover-bottom" trigger="triggerCallDate" size="fixed">
    <ng-template>
      <ion-datetime 
        presentation="date-time" 
        formControlName="callDate" 
        locale="fr-FR" 
        [showDefaultButtons]="true"
        doneText="{{ 'APPLICATION.OK' | translate }}" 
        cancelText="{{ 'APPLICATION.CANCEL' | translate }}">
      </ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

3. 表单提交适配（按需使用） #

如果后端接口要求接收UTC格式时间，提交表单前将本地时间转回标准UTC格式即可：

const formValue = this.formEdit.getRawValue();
if (formValue.callDate) {
  // 转回UTC标准时间传给后端
  formValue.callDate = new Date(formValue.callDate).toISOString();
}
// 调用接口提交formValue

注意事项 #

• 非必要不要给ion-datetime传递带Z后缀的UTC时间字符串，除非明确需要组件按UTC时区渲染时间
• 该问题核心是时区标识与实际业务需要的时间基准不匹配，只要保证传入ion-datetime的时间字符串和业务需要的时区基准一致，就不会出现显示偏差

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