bootstrap date range picker mobile highlights früheres datum bei der änderung des datums

Question

ich benutze bootstrap date range picker mit 2 kalendern so können die menschen wählen start und end daten. Etwas Neues habe ich getan: Sobald ein Benutzer das START-Datum gewählt hat, konzentriere ich mich auf das END-Datum, so dass der Kalender automatisch erscheint.

FIDDLE?

Ich habe versucht, eine Geige einzurichten, aber es funktioniert einfach nicht auf einer Geige, aber Sie können immer auf der Plugin-Website testen, wie es auch auf dem ursprünglichen Plugin passiert. Siehe date range picker website hier.

DAS PROBLEM

Auf dem iPhone, wenn ich wählen Sie das Startdatum der enddate Kalender automatisch erscheint, das ist toll. Aber das Problem ist, es hängt an einem Hover, wo ich meinen Finger hatte. Wenn Sie sich also den Screenshot ansehen, habe ich im START-Kalender 8th ausgewählt und wenn er auf den END-Kalender fokussiert, schwebt er automatisch über 6th, weil ich meinen Finger auf dem gleichen Bereich hatte, als ich 8th auswählte.

Wie kann das behoben werden? Ich habe versucht, alle ios hover issue Fixing-Plugins und Lösungen da draußen, aber nichts scheint das zu beheben.

Answer 1

Können Sie Enddatums Datumsauswahl zerstören und neu zu initialisieren, wenn Sie es nach dem Benutzer wählen Sie Start-Datum angezeigt werden?

Es wird Website wenig langsam, wenn Benutzer Datum auswählen. Ich habe kein I-Phone, also kann ich nicht replizieren, also ist es nur Annahme.

Answer 2

Ich würde autoclose: true einstellen, so dass der Datepicker automatisch schließt, wenn ein Datum ausgewählt wird. Dann können Sie hide Ereignis zu wissen, verwenden, wenn ‚Ende‘ Datepicker zu zeigen, aber hier setzen Sie eine kleine Auszeit wie 100-200ms

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

prüfen Fiddle