jQuery UI Datepicker month and year combo not working in jQuery BlockUI (Popup)

Question

When i open jQuery UI datepicker in BlockUI (popup) and try to change month and year, dropdown does not open. It's working fine in popup but out side of 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

This is because jquery blockUI is catching your click event, have a look at its handler() function :

// 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;
};

So your click event will be propagated ONLY :

• if the clicked element ancestor's is a div with css class blockMsg (or your own class if you have changed the default blockMsgClass option value)
• or if your clicked element ancestor's children are not div with .blockUI css class

The problem is that the jquery-ui datepicker div (div#ui-datepicker-div) is automatically appended outside your div.popup so it is not fulfilling any of these requirements.

So a quick fix will be to add the css class blockMsg to the datpicker div (which is an ancestor of the clicked select element) as in this jsFiddle.

Another solution would be to append the datepicker div to the popup div once it has been generated but you will have positionning problem when you will open the datepicker.