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

Question

当我在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

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选项值)
• 或者如果你点击的元素祖先的孩子不是.blockUIcss类的div

问题是jquery-ui datepicker div(div#ui-datepicker-div)会自动附加到你的外面,div.popup所以它不满足任何这些要求.

因此,快速解决方法是将css类添加blockMsg到datpicker div(它是被点击select元素的祖先),就像在这个jsFiddle中一样.

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