bug: ion-datetime calendar part is blank (iOS 26.2)

[michael-arboleda]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

This issue has only been seen and reproducible on ios 26.2 only.

When opening ion-datetime, more often than not, the calendar part is blank. This is because ion-datetime does NOT have the class 'datetime-ready', which it needs to show the calendar part.

Expected Behavior

Opening ion-datetime displays the calendar part.

Steps to Reproduce

1. Tap on an ion-datetime
2. Observe
   NOTE: This does not happen every time. Higher chance to reproduce after launching an app.

Code Reproduction URL

.

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.8.6

Capacitor:

Capacitor CLI : 7.4.3
@capacitor/android : 7.4.3
@capacitor/core : 7.4.3
@capacitor/ios : 7.4.3

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.19.5
npm : 10.8.2
OS : macOS Unknown (Sequoia Version 15.7.3 (24G419))

Additional Information

ScreenRecording_01-21-2026.11-50-34_1.mov

[capc0]

Thanks for reporting the issue. Is there any known workaround for the behaviour?

I am able to reproduce this in about 15% of "launches" of the datepicker on iOS 26.3.

Continuation of bug #30706, possibly fixable via #30864

[MarissaAtWork]

The workaround I'm using is to set up a Mutation Observer to add the class back once Ionic's code removes it.
I call the method that creates the observer using the (willPresent) event on the modal if using an inline modal.
When not using inline modals I call it on the (ionViewWillEnter) lifecycle hook.

private _startDatePickerObserver: MutationObserver | null = null;

  onStartDatetimeModalWillPresent(event: any) {
    this._startDatePickerObserver = this._createDatePickerObserver(event);
  }

private _createDatePickerObserver(event: any): MutationObserver | null {
    const modal = event.target as HTMLElement;
    const datetimeElement = modal.querySelector('ion-datetime');

    if (!datetimeElement) return null;

    datetimeElement.classList.add('datetime-ready');

    const observer = new MutationObserver(() => {
      if (!datetimeElement.classList.contains('datetime-ready')) {
        datetimeElement.classList.add('datetime-ready');
      }
    });

    observer.observe(datetimeElement, {
      attributes: true,
      attributeFilter: ['class']
    });

    return observer;
  }

  ngOnDestroy() {
    this._startDatePickerObserver?.disconnect();
  }

Template:

            <ion-modal
              [keepContentsMounted]="true"
              (willPresent)="onStartDatetimeModalWillPresent($event)"
              (didDismiss)="onStartDatetimeModalDidDismiss()">
              <ng-template>
                <ion-datetime
                  id="floorPlanScheduleStartDate"
                  [min]="today"
                  presentation="date"
                  [showDefaultButtons]="true"
                  (ionChange)="onStartDateChange($event)" />
              </ng-template>
            </ion-modal>

[YVitusevychPAR]

Hi! We were able to reproduce this problem even in Ionic 8.8.1. Can anyone also confirm that the issue is still present in the latest version after the fix in 8.7.11?

[bilalsaeed]

still getting it in 8.8.3

[shinkhouse]

+1, experiencing this issue as well

[msio]

in 8.8.10 still the issue

[karltm]

It seems we are having success with this workaround. Sometimes the UI elements flicker a bit, but I was not able to reproduce the problem anymore we had with the date picker being absent.

-      <ion-modal #endDateModal trigger="open-date-input-end-date">
+      <ion-modal #endDateModal trigger="open-date-input-end-date" (didPresent)="onDatetimePresented($event)">

    onDatetimePresented(ev: Event): void {
        forceDatetimeReady(ev);
    }

function forceDatetimeReady(ev: Event): void {
    const modal = ev.target as HTMLElement | null;
    const datetime = modal?.querySelector('ion-datetime');
    if (!datetime) {
        return;
    }
    datetime.classList.add('datetime-ready');
    const calendarBody = datetime.shadowRoot?.querySelector<HTMLElement>('.calendar-body');
    if (!calendarBody) {
        return;
    }
    // Ionic renders [previous, working, next] months, each one body-width wide.
    // Scrolling one body-width centers the working month (matches Ionic's own
    // initialisation). LTR only, which is all we currently ship.
    calendarBody.scrollLeft = calendarBody.clientWidth;
}

[vvvvvvvvvvi]

this issue still persists in v8.8.12.
It's reproducible in the official link by repeatedly opening and closing the modal.
https://ionicframework.com/docs/api/datetime-button#events

Besides the blank screen, I am also encountering the issue described in: #31143

MicrosoftTeams-video.mp4