javascript - jQueryUI datepicker - 第二个实例闪烁然后在调用 show() 时消失

Question

我的页面上有两个 jQueryUI 日期选择器。

它们初始化如下:

jQuery("#departureDate").datepicker({
    beforeShow: function() {
        getDatesForCalendar("outbound");
    },
    numberOfMonths: 3,
    constrainInput: true,
    dateFormat: 'dd/mm/yy',
    showButtonPanel: false,
    hideIfNoPrevNext: true,
    onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show");  } 
});


jQuery("#returnDate").datepicker({
    beforeShow: function() {
        getDatesForCalendar("return");
    },
    numberOfMonths: 3,
    constrainInput: true,
    dateFormat: 'dd/mm/yy',
    showButtonPanel: false,
    showOn: "focus",
    hideIfNoPrevNext: true,
    defaultDate: +1
});

在他们弹出之前，他们使用 getDatesForCalendar() 检查哪些日期对他们可用，其中不包含应隐藏或显示日历的代码。

我的问题是，当第一个日历调用第二个日历时(执行 onSelect)，第二个日历闪烁一秒钟然后消失。这是一个仅限 FF/Chrome 的问题，似乎不会影响 IE8。

我尝试了很多解决方案，包括更改 tabindex(现在根本没有)、禁用显示焦点功能，最后我没有手动调用 datepicker("show")，而是尝试调用 focus( ) 在它绑定(bind)的字段上。没有任何效果!

如有任何建议，将不胜感激。

非常感谢，

jack

Answer 1

不要在 onSelect 中显示日期选择器，而是使用 onClose 事件。

jQuery("#departureDate").datepicker({

            numberOfMonths: 3,
            constrainInput: true,
            dateFormat: 'dd/mm/yy',
            showButtonPanel: false,
            hideIfNoPrevNext: true,
           onClose:function()
                 { 
               jQuery('#returnDate').datepicker('show');       
               }
        });


        jQuery("#returnDate").datepicker({

            numberOfMonths:3,
            constrainInput: true,
            dateFormat: 'dd/mm/yy',
            showButtonPanel: false,
            showOn: "focus",
            hideIfNoPrevNext: true,
           defaultDate: +1
        });​