Ionic 7 Angular 15: ion-datetime picker doesn't paint intermittently if used in multiple components

73 Views Asked by At

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>

0

There are 0 best solutions below