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);
}
1条答案
按热度按时间zpjtge221#
我有同样的问题与许多android版本,所以我切换到ion2-calendar这解决了我的问题