5

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.net/B78JJ/

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

4

3 に答える 3

4

フォーカス タイミングの問題のようです。簡単な回避策は、短いタイムアウトを使用することです。

$('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);
    }
});

作業フィドルを参照してください

于 2013-04-20T16:55:03.743 に答える
0

このため

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

使用できます

window.setTimeout(function(){
           $('.date-picker-2').datepicker('show');
        }, 1);
于 2013-04-20T16:52:03.280 に答える