Question

当我在BlockUI（弹出窗口）中打开jQuery UI datepicker并尝试更改月份和年份时，下拉列表无法打开。它在popup中运行良好，但在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;
};

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

如果点击的元素祖先是带有css类div的{{1}}（如果您更改了默认的blockMsg选项值，则为您自己的类）
或者如果您点击的元素祖先的孩子不是div blockMsgClass css class

问题是jquery-ui datepicker div（.blockUI）会自动附加到div#ui-datepicker-div之外，因此无法满足任何这些要求。

因此，快速解决方法是将css类div.popup添加到datpicker div（它是点击的blockMsg元素的祖先），如同this jsFiddle中一样。

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

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

HTML：

jQuery的：

1 个答案: