Ionic 6/7 ion-datetime时间选择器随机卡顿在12:00 AM问题求助

问题现象 #

在Ionic 6及7版本中，ion-datetime时间选择器出现随机卡顿问题：多次打开该选择器后，会随机停留在12:00 AM状态，无法显示已赋值的时间或当前系统时间。

相关代码 #

HTML代码 #

<ng-template>
    <ion-row>
        <ion-datetime [value]="selectedDate" #dateTimePicker [presentation]="presentation" [min]="minValue"
          [max]="maxValue" (ionChange)="onChange($event)"></ion-datetime>
        <ion-text (click)="dismiss()">Close</ion-text>
    </ion-row>
</ng-template>
</ion-modal>

<section>
    <ion-input [value]="displayValue" [id]="triggerId" readonly></ion-input>
</section>

TypeScript代码 #

@ViewChild(IonModal) modal: IonModal;

onChange($event) {
  this.displayValue = // 将时间戳转换为AM/PM格式
}

dismiss() {
  this.modal.dismiss();
}

排查与解决建议 #

• 确保selectedDate在模态框每次打开时正确初始化：可在模态框的willEnter生命周期钩子中重新赋值selectedDate，避免模态框复用导致的数值未更新问题。
• 强制刷新组件：通过@ViewChild('dateTimePicker')获取ion-datetime实例，在模态框打开后调用forceUpdate()方法（Ionic 6+支持），触发视图更新。
• 校验时间格式：确认selectedDate是符合要求的ISO 8601字符串（如2024-05-20T14:30:00），格式不匹配会导致组件无法正确渲染时间。
• 升级框架版本：该问题可能是Ionic已知bug，尝试升级到Ionic 7的最新补丁版本，查看官方是否已修复该类卡顿问题。

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