Ion-datetime not showing on mobile device

Ionic Framework Ionic Angular
1

Hi,

New to ionic framework and the ion-datetime on ion-modal is not showing on mobile device but showing on desktop browser. The form is standalone component. Can anybody help basically my requirement, I need ion-input box to be filled with datepicker and it should be same design and style of input box?

Here is my code:

<ion-item>
          <ion-label position="stacked">Bill Date</ion-label>
          <ion-input formControlName="billDate" placeholder="Select Date" (click)="openCalendar()" readonly></ion-input>
          <ion-datetime-button datetime="datetime" id="fake-click"></ion-datetime-button>
          <ion-modal [keepContentsMounted]="true" [isOpen]="showCalendar" (didDismiss)="cancelCalendar()">
            <ng-template>
              <ion-datetime id="datetime" locale="en-IN" presentation="date" [showDefaultButtons]="true"
                doneText="Confirm" cancelText="Cancel" (ionChange)="onDateSelected($event)"></ion-datetime>
            </ng-template>
          </ion-modal>
        </ion-item>

I coloured the border to red to check whether modal is coming or not on mobile device.

  showCalendar : boolean = false;
openCalendar() {
    this.showCalendar = true;
  }
  cancelCalendar() {
    this.showCalendar = false;
  }

  onDateSelected(event: any) {
    const isoDate = event.detail.value; // Selected date in ISO format
    const selectedDate = isoDate ? format(new Date(isoDate), 'd MMM yyyy') : ''; // Format date
    this.form.patchValue({ mobileDetails: { billDate: selectedDate } }); // Update nested form field
    this.cancelCalendar();
  }

WhatsApp Video 2025-03-14 at 1.15.53 PM

Technologies:
Ionic 8
Angular 18