Ion-datetime multiple value selected after manually selection

Hey guys!

There are 2 “ion-datetime”. (startDate and endDate).
After i set my “startDate”, i want to set “minDate” and “maxDate” of “endDate”. This is working correctly.
After i set my “endDate”, i want to set “minDate” and “maxDate” of “startDate”. This is working correctly.
The time interval is 2 years. This is working correctly.

My problem is: After selecting startDate for the second time, both the previous and correct values will be selected in endDate and vica versa. (green highlight in the picture)

Here is my “startDate“ example template code:

<ion-item lines="none" [id]="'open-start-date-modal-' + intergalacticTypeInput()"
          *ngIf="selectedInnerPeriod === 'custom'">
  <ion-text slot="start">
     Start of examination period
  </ion-text>
  <ion-text slot="end">
    {{ selectedInnerStartDate | date: 'yyyy.MM.dd.' }}
  </ion-text>
</ion-item>
<ion-modal [keepContentsMounted]="true" [trigger]="'open-start-date-modal-' + intergalacticTypeInput()"
           class="ion-datetime-button-overlay rounded-black-border-modal"
           *ngIf="selectedInnerPeriod === 'custom'">
  <ng-template>
    <ion-datetime
      id="startDate"
      #startDate
      presentation="date"
      [min]="minStartDate"
      [max]="maxStartDate"
      [preferWheel]="true"
      [(ngModel)]="selectedInnerStartDate"
    >
      <ion-buttons slot="buttons">
        <ion-button color="warning" (click)="startDate.cancel(true)">Cancel</ion-button>
        <ion-button color="primary"
                    (click)="startDate.confirm(true); setMinMaxEndDate(selectedInnerStartDate)">Save
        </ion-button>
      </ion-buttons>
    </ion-datetime>
  </ng-template>
</ion-modal>

Here is my “startDate“ example typescript code:

setMinMaxEndDate(date: string) {
  this.selectedInnerEndDate = moment(date).add(2, 'year').format('YYYY-MM-DD');
  this.minStartDate = moment(date).subtract(2, 'year').format('YYYY-MM-DD');
  this.maxStartDate = moment(date).format('YYYY-MM-DD');
  this.minEndDate = moment(date).format('YYYY-MM-DD');
  this.maxEndDate = moment(date).add(2, 'year').format('YYYY-MM-DD');
}

How can i avoid this side effect?

Thank you in advance.

1 post - 1 participant

Read full topic