Bootstrap date range picker mobile highlights previous date when changing date

Question

I use bootstrap date range picker with 2 calendars so people can select start and end dates. Something new I have done is, once a user select the START date, i focus on the END date so the calendar automatically pops up.

FIDDLE?

I tried to setup a fiddle but it just doesnt work on a fiddle, but you can always test on the plugin website as it happends on the original plugin as well. See date range picker website here.

THE PROBLEM

On iPhone, when I select the start date the enddate calendar automatically pops up, which is great. But the problem is, it hangs onto a hover where I had my finger. So if you look at the screenshot, I selected 8th on the START calendar and when it focuses onto the END calendar it hovers over 6th as well automatically because I had my finger on the same area when I selected 8th.

How can this be fixed? I tried all the ios hover issue fixing plugins and solutions out there but nothings seems to fix this.

Answer 1

Can you destroy and reinitialize end-date date-picker when you display it after user select start-date?

It will make website little slow whenever user select date. I don't have I-phone so I can't replicate so it's just assumption.

Answer 2

I would set autoclose: true, so that the Datepicker automatically closes when a date is selected. Then, you can use hide event to know when to show 'end' Datepicker, but here you set a small timeout like 100-200ms

$('#datepicker-start').datepicker({
    autoclose: true
}).on( 'hide', function(e) {
    window.setTimeout(function(){
        $('#datepicker-end').datepicker('show');
    }, 100)
});
$('#datepicker-end').datepicker();

Check Fiddle