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>

How did you resolve this issue? – user1027620 Feb 24 '23 at 05:02 — user1027620, Feb 24 '23 at 05:02
hi @user1027620, not really i changed my code as followed: – xne2687 Apr 03 '23 at 14:42 — xne2687, Apr 03 '23 at 14:42

score 0 · Answer 1 · answered Apr 03 '23 at 14:47

<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>

second ion-datetime dosent trigger (ionChange)

1 Answers1