Ionic ion-datetime时间选择器Android设备上的奇怪行为

slwdgvem  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(170)

I'm struggling with an Angular/Ionic app that requires Date and Time entry via date-pickers.
Tapping on the Time field opens the time picker. In my browser, the picker works correctly, I can spin, choose a time, the [max] values work correctly.
But when we build an APK and install on an Android device, the spinner sometimes, randomly, doesn't work. A detailed description is appended below.

Running the app on the browser:

  • When the time picker opens, it contains the currently selected time and works normally.

Running the app on the device:

  • When the time picker opens, it sometimes contains the currently selected time, but sometimes, randomly, contains a value like 1 00 AM. When it does this, a date can be selected, but the value is not returned when the OK button is tapped.

Being a relative newcomer to Angular/Ionic, I'm battling to find any reports on similar behavior - or any ideas on how to debug this.
Has anyone else experienced this?
Here's the HTML snippet

<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>

And here's the .ts

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);
}
zpjtge22

zpjtge221#

我有同样的问题与许多android版本,所以我切换到ion2-calendar这解决了我的问题

相关问题