Ionic中ion-datetime时间选择器在Android设备上的异常问题

我正在开发一款使用日期选择器输入日期和时间的Angular/Ionic应用。在浏览器环境中，时间选择器运行正常，可滚动选择时间，[max]参数也能正常生效。但打包成APK安装到Android设备后，选择器滚轮（spinner）会随机出现失效情况：打开时间选择器时，有时显示当前选中的时间，有时会随机显示类似“1 00 AM”的值，此时虽能选择时间，但点击“OK”按钮后值不会返回。作为Angular/Ionic新手，找不到类似问题的相关报告或调试思路，请问有人遇到过该问题吗？

相关代码片段 #

HTML代码

<ion-input 
    readonly
    [value]="validationsForm.get('tripEndTime').value | date: env.app.dateTimeTimeDisplay"
>
</ion-input>
<ion-modal class="time-model" trigger="open-modal-end-time">
    <ng-template>
        <ion-content scrollY="false">
            <ion-datetime 
                id="datetime" 
                class="time-model-datetime" 
                #tripEndTime size="cover"
                name="select-end" 
                presentation="time" formControlName="tripEndTime"
                [min]="minEndDateTime"
                [max]="maxEndDateTime"
            >
                <ion-buttons slot="buttons">
                    <ion-button 
                        color="primary" 
                        (click)="closeEndTime()"
                    >
                        {{ 'CANCEL' | translate }}
                    </ion-button>
                    <ion-button 
                        color="primary" 
                        fill="outline" 
                        (click)="saveEndTime()"
                        color="primary"
                    >
                        {{ 'DONE' | translate }}
                    </ion-button>
                </ion-buttons>
            </ion-datetime>
        </ion-content>
    </ng-template>
</ion-modal>

TypeScript代码

async saveStartTime() {   
    console.log(this.CLASS_NAME + '.saveStartTime()');
    await this.startTime.confirm(true);

    this.updateStartDateAndTime(); 

    this.setDateMaxMin('startTime');
}

updateStartDateAndTime() {

    /* If Day spinner was set, we have YYYY-DD-MM; if Time spinner was set 
    we have HH:mm.  Either way, we need to set BOTH spinners to the updated
    YYYY-MM-DDTHH:mm */
    const tripStartDay = moment(this.validationsForm.get('tripStartDay').value).format('YYYY-MM-DD');
    const tripStartTime = moment(this.validationsForm.get('tripStartTime').value).format('HH:mm');

    const updateDate = tripStartDay + 'T' + tripStartTime;

    console.log(this.CLASS_NAME + '.updateStartDateAndTime()',
        '\n' + 'updateDate', updateDate
    )

    this.setStartDateAndTime(updateDate);

}


setStartDateAndTime(updateDate: string) {
    console.log(this.CLASS_NAME + '.setStartDateAndTime()', updateDate)
    this.validationsForm.get('tripStartDay').setValue(updateDate);
    this.validationsForm.get('tripStartTime').setValue(updateDate);
}

可能的排查与解决方向 #

• 确保DateTime值格式严格一致：Ionic的ion-datetime要求值必须是符合ISO 8601的字符串（如YYYY-MM-DDTHH:mm）。检查moment处理空值或异常值时的输出，避免生成无效格式导致选择器解析错误。
• 解决表单控件同步冲突：代码中同时使用了formControlName和手动setValue，Android原生环境下可能存在数据同步延迟。可以移除手动赋值，依赖表单自动同步；或者赋值后调用markAsDirty()和updateValueAndValidity()强制更新控件状态。
• 远程调试Android设备：用Chrome的chrome://inspect连接设备，查看控制台报错，以及minEndDateTime、maxEndDateTime和表单值的实际状态，确认是否存在值未正确传递的问题。
• 升级Ionic版本：部分旧版本Ionic的ion-datetime在Android环境下有Spinner渲染bug，升级到稳定版本（如Ionic 6/7），查看官方是否修复过类似问题。
• 优化Modal初始化时机：在打开Modal前，确保tripEndTime控件已设置正确初始值，避免控件值为空或未解析完成导致的异常渲染。

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