I have two elements inputthat work like jQuery UI datepickers. After you make a selection in the first datepicker element, it should automatically focus on the second datepicker element and show the calendar, which will allow you to quickly and easily make a choice.
For some reason, the second datepicker / calendar appears momentarily and then disappears. I am not sure why it disappears; can someone offer me an explanation why it disappears and a possible solution?
The following libraries are currently used: jQuery 1.8.3, jQuery UI 1.9.2
Here is the code I'm 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 the script: http://jsfiddle.net/B78JJ/
- , , , .