Ion-datetime in a popover not visible

Hi, I’ve recently upgraded to Ionic 6 and so I’m migrating the old ion-datetimes to the new ones.

To somehow keep the look and feel of the old date picker, I used the example from Ionic Docs with the new inline datetime opening in a popover.

<ion-item button="true" id="open-date-input">
  <ion-label>Date</ion-label>
  <ion-text slot="end">{{ dateValue }}</ion-text>
  <ion-popover trigger="open-date-input" show-backdrop="false">
    <ng-template>
      <ion-datetime
        #popoverDatetime
        presentation="date"
        (ionChange)="dateValue = formatDate(popoverDatetime.value)"
      ></ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

Unfortunately when the input element is too close to the bottom of the page, a part or even the whole popover is hidden and can’t be interacted with. This is a problem especially on smaller mobile screens because the calendar is a bit chunky and it requires quite a lot of vertical space.

Obviously I could write my own click handler opening the ion-datetime in a new popover/modal using the PopoverController/ModalController, but I was wondering if this is the intended behavior or a bug.

Has anyone else also experienced this?

1 post - 1 participant

Read full topic