ion datetime component persist value across different components

Question

i have a very strange problem where i am using ion-datetime component on component inside a model component. From this component, I call another component in a model that also has an ion-datetime component. the problem is that the value set in the ion-date time on first model stays when I go the component launched from it.

here is how it looks like:

Edit Asset Component

 <ion-row>
      <ion-col>
        <ion-label>Purchase Date</ion-label>
      </ion-col>
        <ion-col>
          <ion-datetime-button datetime="datetime"></ion-datetime-button>
          <ion-modal [keepContentsMounted]="true">
            <ng-template>
              <ion-datetime id="datetime" presentation="date"  [preferWheel]="true" [showDefaultButtons]="true" (ionChange)="reDateChanged($event)" [(ngModel)]="calcStartDate"></ion-datetime>
            </ng-template>
          </ion-modal>
        </ion-col>
    </ion-row>

calcStartDate:string 
reDateChanged(e:any) {
    this.calcStartDate = e.detail.value
  }

 async addExpense(){
    const modal = await this.modalCtl.create({
        component: AddExpenseComponent,
        componentProps: {
          "expenseType": this.assetType,
          "doNotCommit": true,  
          "parentKey": objectKey,
          "mode": "add"
        }
      })

      modal.present();
      const { data, role } = await modal.onWillDismiss();
}

AddExpenseComponent

 <ion-row>
    <ion-col>
      <ion-label>Date</ion-label>
    </ion-col>
    <ion-col>
        <ion-datetime-button datetime="datetime"></ion-datetime-button>
        <ion-modal [keepContentsMounted]="true">
          <ng-template>
            <ion-datetime id="datetime" presentation="date"  [preferWheel]="true" [showDefaultButtons]="true" (ionChange)="dateChanged($event)" [(ngModel)]="calcStartDate" (ngModelChange)="calcStartDate"></ion-datetime>
          </ng-template>
        </ion-modal>
      </ion-col>
  </ion-row>

calcStartDate:string  //expense start date

dateChanged(e:any) {
    this.calcStartDate = e.detail.value
  }

So the date on "Edit Asset" is set to jan 1 2013. Now when I launch the model from this page the "Add expense" model shows the same date too..

Answer 1

Make sure you have unique id and name attribute for the ion-datetime fields, else the binding will cause issues like this:

AddExpenseComponent

<ion-datetime 
  id="datetime-popup" 
  name="datetime-popup" 
  presentation="date"  
  [preferWheel]="true" 
  [showDefaultButtons]="true" 
  (ionChange)="dateChanged($event)"
   [(ngModel)]="calcStartDate" 
  (ngModelChange)="calcStartDate"
  ></ion-datetime>

Edit Asset Component

<ion-datetime 
  id="datetime-edit" 
  name="datetime-edit" 
  presentation="date"  
  [preferWheel]="true" 
  [showDefaultButtons]="true"
  (ionChange)="reDateChanged($event)"
  [(ngModel)]="calcStartDate"
></ion-datetime>