jQuery UI Datepicker月份和年份组合不能在jQuery BlockUI(Popup)中工作

当我在BlockUI(弹出窗口)中打开jQuery UI datepicker并尝试更改月份和年份时,下拉列表无法打开.它在弹出窗口工作正常,但在datepicker的一边.

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

解决方法

这是因为 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;
};

因此,您的点击事件将仅传播：

>如果单击的元素祖先是带有css类blockMsg的div(如果更改了默认的blockMsgClass选项值,则为您自己的类)
>或者如果你点击的元素祖先的孩子不是.blockUI css类的div

问题是jquery-ui datepicker div(div#ui-datepicker-div)会自动附加到div.popup之外,因此它不能满足任何这些要求.

因此,快速解决方法是将css类blockMsg添加到datpicker div(它是单击的select元素的祖先),如this jsFiddle所示.

另一个解决方案是在生成弹出窗格后将其添加到弹出窗格div中,但是当您打开日期选择器时,您将遇到定位问题.