Bootstrap date range picker mobile emphasizes previous date when changing date

Question

I use bootstrap to select a date range with two calendars so that people can choose start and end dates. Something new that I did when the user selects the START date, I focus on the end date so that the calendar pops up automatically.

FIDDLE?

I tried to configure the fiddle, but it just doesn’t work on the fiddle, but you can always check on the plugin website how this happens on the original plugin. See the date range selection site .

PROBLEM

On the iPhone, when I select the start date, the enddate calendar automatically opens, which is great. But the problem is that it hangs on a pair where I had my finger. Therefore, if you look at the screenshot, I selected 8th in the START calendar, and when it focuses on the END calendar, it also automatically hangs over 6th , because I had a finger in the same area when I selected 8th .

How can this be fixed? I tried all the plugins and solutions for fixing the ios hover issue , but nothing fixes it.

Answer 1

Can you destroy and reinitialize the date-pick date when you display it after the user selects a start date?

This will make the site slow when the user selects a date. I do not have an I-phone, so I can not replicate, so this is just an assumption.

Answer 2

I would set autoclose: true so that the Datepicker automatically closes when the date is selected. Then you can use the hide event to find out when to show the “end” of Datepicker, but here you set a small timeout, for example, 100-200 ms

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

Tick Fiddle