How to delay datepicker opening until keyboard is closed?

Date and time pickers
1

I’ve configured my datepicker to display at the bottom of the screen on small screens.

If I’m in a form (on my phone) and on a text input, the virtual keyboard automatically opens (as it should). The problem is, if I then click on a date input (while the keyboard is still open), the mobiscroll datepicker opens up above the keyboard, then when the keyboard disappears the mobiscroll datepicker suddenly drops to the bottom. This is a bit jarring for the user.

How could I delay the opening of the datepicker until after the virtual keyboard has collapsed?

  $('.datepicker').mobiscroll().calendar({
   display:'bottom',
   dateFormat: js_dateformat,
   buttons:['clear'],
   setOnDayTap:true,
   responsive: {
       medium:{
         display: 'center'
       }
   },
   onClear: function(event,inst){
     inst.hide();
   }
  });
2

Hi @Vincent_Wansink :wave:

We just tested your code but was not able to reproduce this. Can you send a screencast and a working example from which we can reproduce this issue?

3

You can see an example here: https://berlin.timesavr.net/prod/registration.php?cid=1414

Open this on your phone. Go to the first parent section and put your focus in a text field like “work address”. The virtual keyboard on your phone should pop up.

Now tap the birthdate field. This will open up the datepicker but initially it will display too high up on the screen (because of the virtual keyboard taking up space) and then it will suddenly slide down to the bottom.

Note that I’m using an Android phone. I haven’t tried it on an iPhone.

4

Thanks for sharing @Vincent_Wansink :+1:

That’s right, this only occurs in Android devices. However, unfortunately at the moment we don’t have a proper solution for this problem.

We do have a github issue on this so we keep an eye on this problem.

5

Yes, I just tried it on an iPhone and it appears that the mobiscroll datepicker waits until the virtual keyboard has disappeared before it slides up.