JQuery UI - Cannot change month/year in datepicker within Modal Dialog

Question

Using Datepicker inside a modal Dialog, don't work the Change Month/Year dropdown in Firefox 19.0.2 see:

http://jsfiddle.net/469zV/2/

HTML

<div id="dialog-form" title="test" style="display:none">
  <form>
     <fieldset>
        <p>Date1: <input type="text" id="datepicker"/></p>  
     </fieldset>
  </form>
</div>

SCRIPT

$( "#dialog-form" ).dialog({
    modal: true
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
});

After search a lot can find some info about this problem but nothing about solution:

http://bugs.jqueryui.com/ticket/8989#no1

How do I solve this?

Solution 1

This may not be exactly what you were looking for, but if you drop the text input, it will give you the month and year selection back.

Working Example

$( "#dialog-form" ).dialog({  
    modal:true,
    height:340,
    width:340
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,

});

<div id="dialog-form" title="test" style="display:none"> 
    <form>
    <fieldset> 
        <div id="datepicker"/></div>  
    </fieldset>
    </form>
</div>

Solution 2

You need to blur out of the textbox after picking a date so it can re-trigger the focus event:

$( "#dialog-form" ).dialog({
    modal: true
});

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true    
}).on('change',function(){
                 $(this).blur()
               });

Comments

[geckob]

Thanks! Works for me