jQuery UI Datepicker 月份和年份组合在 jQuery BlockUI（弹出窗口）中不起作用

Question

当我在 BlockUI（弹出窗口）中打开 jQuery UI 日期选择器并尝试更改月份和年份时，下拉菜单不会打开。它在弹出窗口中运行良好，但在日期选择器之外。

HTML：

<div class="popup">
    Date Picker<input type="text" class="datepicker" />
</div>

jQuery:

$(document).ready(function(e) {
    $.blockUI({
        message:$('.popup'),
        focusInput: false,
        onBlock:function(){}
    });

    $( ".datepicker" ).datepicker({
        dateFormat: 'dd-mm-yy',
        changeYear: true,
        changeMonth: true,
        yearRange: 'c-10:c+3',
        showButtonPanel: false            
    }); 
});

jsFiddle

Answer 1

这是因为jquery blockUI 正在捕捉你的点击事件，看看它的handler() 函数：

// event handler to suppress keyboard/mouse events when blocking
function handler(e) {
    // allow tab navigation (conditionally)
    [...]
    var opts = e.data;
    // allow events within the message content
    if ($(e.target).parents('div.' + opts.blockMsgClass).length > 0)
        return true;

    // allow events for content that is not being blocked
        return $(e.target).parents().children().filter('div.blockUI').length == 0;
};

所以你的点击事件只会被传播：

• 如果点击的元素祖先是 div 且 css 类为 blockMsg（或您自己的类，如果您更改了默认的 blockMsgClass 选项值）
• 或者如果您单击的元素祖先的子元素不是具有.blockUI css 类的 div

问题在于 jquery-ui datepicker div (div#ui-datepicker-div) 自动附加到您的 div.popup 之外，因此它不满足任何这些要求。

因此，一个快速解决方法是将 css 类 blockMsg 添加到 datpicker div（它是单击的 select 元素的祖先），如 this jsFiddle。

另一种解决方案是在生成日期选择器 div 后将其附加到弹出 div，但打开日期选择器时会出现定位问题。