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