second ion-datetime dosent trigger (ionChange)

Question

hope u guys are fine so far. I´ve got following problem. i´ve got two sperated "ion-datetime" elements inside of an "accordion" element, once with "presentation=date" and the other one with "presentation=time", For the first "ion-datetime" element the "(ionChange)" event is triggering after clicking "Cancel" or "Done" button, but for the second "ion-datetime" the "(ionChange)" event is not triggering after button click. Unfortunately, my research was unsuccessful. Hope someone can help me.

    <ion-accordion-group>
  <ion-accordion value="datePicker" style="width: 370px">
    <ion-datetime
      class="ion-no-padding"
      style="width: 370px"
      slot="content"
      size="cover"
      presentation="date"
      [(ngModel)]="taskDate"
      (ionChange)="setTaskDate(taskDate)"
    >
      <ion-buttons slot="buttons">
        <ion-button (click)="cancelDate()">Cancel</ion-button>
        <ion-button (click)="confirmDate(taskDate)">Done</ion-button>
      </ion-buttons>
    </ion-datetime>
  </ion-accordion>

  <ion-accordion value="timePicker" style="width: 370px">
    <ion-datetime
      class="ion-no-padding"
      style="width: 370px"
      slot="content"
      size="cover"
      presentation="time"
      [(ngModel)]="taskTime"
      (ionChange)="setTaskTime(taskTime)"
    >
      <ion-buttons slot="buttons">
        <ion-button (click)="cancelTime()">Cancel</ion-button>
        <ion-button (click)="confirmTime(taskTime)">Done</ion-button>
      </ion-buttons>
    </ion-datetime>
  </ion-accordion>
</ion-accordion-group>

Answer 1

<div class="newEventFormular">
    <ion-label position="stacked"> Event Name: </ion-label>
    <ion-input
      type="text"
      placeholder="Wedding of Faiz & Maria...."
      [(ngModel)]="eventName"
    ></ion-input>
   
    <!-- Input Begin Date -->
    <ion-label position="stacked"> Begin: </ion-label>
    <ion-datetime-button datetime="startTimeStamp1"></ion-datetime-button>

    <ion-popover [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime
          id="startTimeStamp1"
          [(ngModel)]="startTimeStamp"
          [showDefaultButtons]="false"
          [presentation]="'date-time'"
          [min]="minDate"
          minuteValues="0,30"
        >
        </ion-datetime>
      </ng-template>
    </ion-popover>

    <!-- Input End Date -->
    <ion-label position="stacked"> End: </ion-label>
    <ion-datetime-button datetime="endTimeStamp1" readonly></ion-datetime-button>
    <ion-popover [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime
          id="endTimeStamp1"
          [(ngModel)]="endTimeStamp"
          [showDefaultButtons]="false"
          [min]="minDate"
          minuteValues="0,30"
        ></ion-datetime>
      </ng-template>
    </ion-popover>
  </div>
  <ion-button
    (click)="createNewEvent()"
    size="large"
    expand="block"
    fill="solid"
  >
    <p style="font-size: 25px; margin-bottom: 30px">+</p>
    CREATE EVENT
  </ion-button>

Answer 2

Had a similar problem, I fixed it by taking the ion-buttons group out of ion-datetime:

<ion-datetime locale="en-GB" 
      presentation="date" 
      [multiple]="true" 
       min="2024-01-01" 
       max="2024-01-31" 
       formControlName="availability">
</ion-datetime>
  <ion-row>
     <ion-buttons>
      <ion-button color="primary" (click)="setOpen(false)">Cancel</ion-button>
      <ion-button color="danger" (click)="clearAvailability()">Clear</ion-button>
      <ion-button color="primary" (click)="sendAvailability()">Save</ion-button>
     </ion-buttons>
 </ion-row>