I have several forms that use multiple ion-datetime pickers as components. For example, on a single form - a component for event start date and time, and another one for event end date and time. Each component uses ion-datetime and they are activated via modals. When both paint, I can select the dates and times I desire. However, intermittently after I select the start date and time, the end date and time component doesn't paint. It shows month, year and time but no dates to pick from. Is there any code I need to insert in the second component to avoid this?
/** from myview.page.ts **/
async openStartDayModal() {
const modal = await this.modalCtrl.create({
component: DateTimeComponent,
});
modal.present();
const { data, role } = await modal.onWillDismiss();
if (role === 'confirm') {
this.postData.startdate = `${data}`;
}
}
async openEndDayModal() {
const modal = await this.modalCtrl.create({
component: DateTimeEndComponent,
});
modal.present();
const { data, role } = await modal.onWillDismiss();
if (role === 'confirm') {
this.postData.enddate = `${data}`;
}
}
/*** from my enddate.component.ts file. Start Date component is exactly the same as the End Date component except that variable for value is startdate. ***/
dateChanged(value) {
this.enddate = value;
}
confirm() {
return this.modalCtrl.dismiss(this.enddate, 'confirm');
}
/*** Its HTML ***/
<ion-datetime #datetime [value]="enddate" (ionChange)="dateChanged(datetime.value)" ></ion-datetime>