Ion-datetime - calendar view blank - white text on white background - android / web

[wekas]

When I open the ion-datetime in calendar mode it is blank on Android 8.
Some users also get this in chrome on PC.
It seems fine on ios in either light or dark mode.

It seems the color of the day numbers is white on a white background.

Code:

 <ion-col *ngIf="startDateType === 'future'" class="date-start-container"> <ion-datetime-button color="dark" datetime="dateControlStart"></ion-datetime-button> <ion-modal [isOpen]="isStartDateModalOpen" [keepContentsMounted]="true"> <ng-template> <ion-datetime id="dateControlStart" class="shadow-override" #dateControlStart [value]="dateStartString" presentation="date" [showDefaultTitle]="true" [showDefaultButtons]="true" [min]="dateStartString" [max]="dateFutureString" (ionChange)="onDateStartChange($event)" > <span slot="title">Select a membership/pass start date</span> </ion-datetime> </ng-template> </ion-modal> </ion-col> 

Partial fix:
I managed to get it partially fixed using this but it only works if you close and then reopen the ion-datetime.

ion-datetime { &:not(.datetime-placeholder) { color: black; } } 

[wekas]

I have found what is causing the issue.
I was using *ngIf in the containing element.

I have replaced
<ion-col *ngIf="startDateType === 'future'" class="date-start-container">
with

ion-col class="date-start-container" [ngClass]="{'hide-me': startDateType !== 'future'}"> <ion-datetime-button color="dark" datetime="dateControlStart"></ion-datetime-button> <ion-modal [isOpen]="isStartDateModalOpen" [keepContentsMounted]="true"> <ng-template> <ion-datetime [ngClass]="{'ion-datetime-fix': applyIonDateTimeFix}" ... async ngOnInit() { setTimeout(() => { this.applyIonDateTimeFix = true; }, 5000); } .ion-datetime-fix { color: black!important; } .hide-me { display: none!important; } 

[wekas]

I now seem to have another issue. Any pointers in the right direction would be appreciated.

When opening the ion-modal with the ion-datetime using <ion-modal [isOpen]=“value” it does not display the modal correctly and hides the background with a white backdrop.

This works fine if I try it with a brand new Ionic project with the latest version or with the original code using the *ngIf.
Code is as above.
See videos here:

bug:

[omprakash-singh1]

<ion-title>Select work date</ion-title> <ion-buttons slot="end"> <ion-button (click)="handleCloseModal()"> <ion-icon name="close" class="close-btn"></ion-icon> </ion-button> </ion-buttons> 

<div> <ion-datetime (ionChange)="onDateChange($event)" presentation="date"> </ion-datetime> </div> 

<button type="button" (click)="handleCloseModal()">Cancel</button> <button type="button" (click)="handleApply()">Apply</button> 

i am using ion date time without any if condition facing same issue
how i solve it?