DGibbs DGibbs - 1 month ago 8
Javascript Question

jQuery UI Datepicker, move from one Calendar to the next?

I'm looking for a way of moving from one Calendar to the next once the user has selected a date e.g:


  • User picks
    dateFrom

  • Automatically close
    dateFrom
    calendar and show
    dateTo
    version



I feel like I'm close to a solution but the
dateTo
calendar pops up and then disappears instantly, I'm hooking into the
onSelect
function of the calendar and when the
inst
is the
dateFrom
calendar, then i call
.focus()
on the
dateTo
text box e.g:

$('.datepicker > input').datepicker({
// snip.....
onSelect: function (dateText, inst) {
var type = $('#' + inst.id).data('calendar');
if (type === 'date-from') {
$('.js-hook--date-to').focus();
}
}
});


Markup:

<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateFrom" runat="server" placeholder="CHECK IN" data-calendar="date-from" />
</div>
</div>
<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateTo" runat="server" CssClass="js-hook--date-to" placeholder="CHECK OUT" data-calendar="date-to" />
</div>
</div>


This causes the next Calendar to pop up but it then disappears, is there an easy way to achieve this?

Edit*

I've also tried using .datepicker("show"); with no success.

2nd Edit*

jsFiddle to demonstrate

Answer

Use a short delay before triggering the focus.

 onSelect: function(dateText, inst) {
   var type = $('#' + inst.id).data('calendar');
   if (type === 'date-from') {
     setTimeout(function() {
       $('.js-hook--date-to').focus();
     }, 50)

   }
 }

As mentioned in comments the plugin only uses one container for all instances.

I think what is happening is since the first instance hasn't quite closed and cleaned up when you trigger the focus, the new instance is getting hidden from event in first

I arbitrarily set the delay and didn't play with it much to see what is best.

DEMO

Comments