bug: Ion-datetime calendar-body doesn’t show after update to Cap7

[xJosue4hg]

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

v8.x

Current Behavior

Before updating to the latest version of Capacitor 7, the ion-datetime components were displayed correctly, but now the grid with the component days is not displayed. I decided to revert to the previous version of Capacitor, but the problem persists.

Expected Behavior

Fix this bug for Capacitor version 7 so that migration can be performed correctly.

Steps to Reproduce

<ion-modal [isOpen]="isOpenStart" trigger="popover-startDate" triggerAction="click"> <ng-template> <ion-datetime #startDate id="startDate" presentation="date" [value]="conventionForm.controls.startDate.value" (ionChange)="handleChangeStartDate($event.target)" > <ion-buttons slot="buttons"> <ion-button color="danger" (click)="startDate.cancel(true)">{{ 'cancel' | translate }}</ion-button> <ion-button color="success" (click)="startDate.confirm(true)">{{ 'accept' | translate }}</ion-button> </ion-buttons> </ion-datetime> </ng-template> </ion-modal>

Code Reproduction URL

https://stackblitz.com/edit/uthfag6k?file=src/app/example.component.ts,src/app/example.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.0.0
@angular-devkit/build-angular : 19.0.0
@angular/cli : 20.2.0

Capacitor:

Capacitor CLI : 6.2.1
@capacitor/core : 6.2.1

System:

NodeJS : v22.12.0
npm : 11.5.2
OS : win11

Additional Information

No response

[ondrotoman]

Same for me. I build a custom component which opens modal with calendar. On iOS it is ok but on android the " datetime-ready" never happend and the days are missing. Please fix it

[jacobg]

Since Ionic 8.7 (from 8.6), the ion-datetime component won't render inside a modal.

[jacobg]

It seems since 8.7, if you render in a modal, you need to set the :keep-contents-mounted="true" on the ion-modal to display the picker. Easy fix 😄