Ion-datetime, "date-time" presentation fails to update

Ionic Framework
1

In @ionic/angular 6.0.1, the ion-datetime Component, with presentation="date-time", fails to update the view when the time is selected. However, the model is updated, as reflected by the view updating to the correct time for a visible split-second after pressing the Done button.

The relevant html is: (see note at the bottom regarding the ionChange)

      <ion-modal class="datetime-modal" trigger="open-meeting">
        <ng-template>
          <ion-content>
            <ion-datetime
              formControlName="datetime"
              (ionChange)="onChangeMeetingField()"
              [showDefaultButtons]="true"
              [min]="minStartDate"
              [minuteValues]="SCHEDULING_MINUTE_VALUES"
              presentation="date-time"
            ></ion-datetime>
          </ion-content>
        </ng-template>
      </ion-modal>

A video demonstrating the behavior can be found here. Dropbox - ion-datetime-presentation-bug.mov - Simplify your life

Removing the ionChange does not correct the issue. FYI, its role is to update the When string that displays after the modal is dismissed (as shown in the video above).

2

First off Ionic 6.18.1 is the CLI package, check your projects package.json to get the correct version.
I would confirm that you are using the latest @ionic/angular release first.

3

Sorry about that. It is "@ionic/angular": "^6.0.1". I’ve corrected the post.

4

Are you wrapping the modal internals in a form? Using what you’ve provided creates an error. Can you provide a more complete example?

5

Got things working, this is actually a matter of having showDefaultButtons on the datetime.

Removing the default buttons will let the updates happen.

6

Confirmed. Removing showDefaultButtons fixed the issue.

1 Like