I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: /

If any other information would be helpful please feel free to ask and I'll be happy to help out.

I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: http://jsfiddle/B78JJ/

If any other information would be helpful please feel free to ask and I'll be happy to help out.

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

3 Answers 3

It seems a focus timing issue, the quick workaround is to use a small timeout:

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        var dees = $(this);
        setTimeout(function() { 
           dees.closest('.fields').find('.date-picker-2').datepicker('show');
        }, 100);
    }
});

See working fiddle

Today in august of 2019 we had same issue. You could fix this using method onClose. Another issue appear when options changeMonth or changeYear enabled but it was solved with onChangeMonthYear.

$(function() {
	$from = $("#from");
  $to = $("#to");

	$from.datepicker({
  	onClose : function(){
      $to.datepicker('show');
    }
  });
  
  $to.datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(year, month ){
    	$to.datepicker('setDate', new Date(year, month-1, 1));
    }
  });
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="from">
<input type="text" id="to">

Because of this:

 $(this).closest('.fields').find('.date-picker-2').datepicker('show');

You can use:

window.setTimeout(function(){
    $('.date-picker-2').datepicker('show');
}, 1);