Multiple Date Pickers in an Ionic Overlay

Date and time pickers
1

Hello! We have an odd issue where if we have multiple date pickers in an Ionic overlay when you click on the first one (start date) it works fine, but when you click on the second one (end date) it pops up the date overlay but then immediately also pops up the date overlay for the first date picker and subsequent clicks continue to pop up additional date overlays. If you manage to select dates/back out of the control, the page will throw a js error and lock up.

If we have multiple date pickers on a page it works fine or if we have an overlay with just one date picker it works fine, it’s just two in an overlay.

We do use reactive forms as well but I’ve tried it using ngModel instead and it seems to be the combination of the Overlay with more than one date picker that is the issue.

Anyone seen anything like this or better yet know how to fix it?

Thanks!

2

Hi Katie,

Thanks for reaching out!

Looks like there were some changes in the ionic modal implementation, and because of that using our controls inside ionic modals will require some extra work. The workaround is, to render their markup inside of the modal but outside of the content, so that the focus doesn’t leave the modal. This can be done with the context setting of the mobiscroll components. The first thing you need to do is get the native element of the modal page. You can do that by injecting the elementref in the constructor:

  public class MyModalPage {
    constructor(public host: ElementRef) {}
    // ...

and then in the template, use the context setting of the calendar, and pass the native element to it:

<ion-content>
    <p>Your content here</p>
    <mbsc-date [context]="host.nativeElement" [(ngModel)]="startDate" [options]="startDateSettings" >
             Test
     </mbsc-date>
</ion-content>

The third thing is to add the following rule to the global styles (global.scss):

.mbsc-fr-lock-ctx.ion-page 
{
    position: absolute;
}

Please let me know if the above workaround works for you!