Ion-datetime in a popover not visible

Ionic Framework Ionic Angular
1

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.

ezgif.com-gif-maker (1)

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?

2

i would do something like this:

<ion-popover class="dateTimePopover" id="dateTimePopover" side="top" alignment="start" size="cover" swipeToClose
    trigger="open-date-input-fine">
    <ng-template>
        <ion-datetime [value]="this.startDate" size="cover" locale="it-IT" #startDatePicker presentation="date">

        </ion-datetime>
    </ng-template>
</ion-popover>


and in your global.scss file:

ion-popover.dateTimePopover {
--offset-y: -100px !important;
}

I had a similar issue and like this, works just fine.

(anyway if 100px are too much, you can change the value)

3

Thanks for your suggestion!

While it works for those popovers overflowing on the bottom, it actually breaks it in my case if the input element is too close to the top of the page. I could fix that by applying the offset individually for each popover, but that would be too much work and maintenance.

For now, I’ve postponed the upgrade to Ionic 6.