Repository navigation
bug: Ion-datetime calendar-body doesn’t show after update to Cap7 #30665
Description
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
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
Activity
ondrotoman commentedon Sep 4, 2025
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 commentedon Sep 9, 2025
Since Ionic 8.7 (from 8.6), the ion-datetime component won't render inside a modal.
jacobg commentedon Sep 9, 2025
It seems since 8.7, if you render in a modal, you need to set the
:keep-contents-mounted="true"on theion-modalto display the picker. Easy fix 😄Ranxxxxx commentedon Jan 20, 2026
Bad news: Even with
keep-contents-mounted=“true”set, there's still a chance it might go blank.Tandstad commentedon Mar 26, 2026
I also have this problem at the moment i updated @ionic/angular: 8.7.17 to 8.7.18 and beyond, so maybe something with the update: datetime: stretch ion-buttons to fill space for ios (#30963) (d46b0b1)
thetaPC commentedon Oct 26, 2026
Thanks for the report, and sorry for the delay.
This is the same issue as #30620, and it no longer reproduces on 9.0.9.
ion-datetimekeeps its calendar days hidden until it detects that it is on screen, and inside a modal that detection sometimes never arrived, which left the days blank and the month arrows unresponsive. #30793 fixed it on Android and in Chromium browsers in v8.7.11. The blank calendar on iOS mentioned in later comments is a separate WebKit issue, tracked in #30933 and fixed by #31460 in v9.0.5. SettingkeepContentsMountedas an earlier comment suggests does not prevent the iOS case, so update to 9.0.5 or later instead. If you need to stay on v8 for now, closing and reopening the modal brings the calendar back.Closing this as a duplicate of #30620, where the full details are.