Why doesn't jQuery UI datepicker work in jQuery dialog modal?

datepicker, jquery, jquery-ui-datepicker, uidatepicker

Solution

I mocked up a quick example that works. You tried changing the z-index on `ui-datepicker` but after looking through the rendered code in Firebug it looks like the id you want is `ui-datepicker-div`. I set the z-index to 9999 and it appears on top of the modal dialog.

<script type='text/javascript'> 
  $(function() {
      $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
  });

  function openmodal() {   
      var $dialogContent = $("#event_edit_container");       

      $dialogContent.dialog({
         modal: true,
         title: "Test",
         close: function() {},
         buttons: {
          save : function() {},
          cancel : function() {}
         }
      }).show();
      $("#ui-datepicker-div").css("z-index", "9999");   
  }
</script>

<div ><a href="javascript:openmodal();">Open modal</a></div>
<div id="event_edit_container" >
    <form>
        Date: <input type="text" id="datepicker" name="datepicker">
    </form>
</div>

Problem

I want to use jQuery UI datepicker in one of my text inputs. This one is in a dialog modal. In fact, I can call datepicker in the normal document text inputs and i got my calender normally but I can't do that in dialog modal text inputs (after clinking inside modal text input I got nothing without any JavaScript error). This is my code to call datepicker : ``` $(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); ); ``` I tried changing css .ui-datepicker Z-index properties but I still got nothing. Do you have tips to fix this problem ? Regards, in my_page.html i have ``` function openSaisieARModal() { window_select_CodeAgence = new showModalWindow('SaisieARModal', 500); } ``` ` And i use this script ``` var showModalWindow=function(id, width) { var newId=id+'Copy'; this.id=newId; var previousNode=document.getElementById(newId); if(previousNode!=null) { previousNode.parentNode.removeChild(previousNode); } var rootNode=document.getElementsByTagName('body')[0]; this.node=document.createElement("div"); rootNode.appendChild(this.node); this.node.setAttribute('id', newId); this.node.setAttribute('title', document.getElementById(id).getAttribute('title')); this.node.innerHTML=document.getElementById(id).innerHTML; if(width==null) { width=400; } $('#'+newId).dialog({autoOpen: true, modal: true, width:width }); this.closeWindow=function() { $('#'+this.id).dialog('close'); } this.centerContent=function() { this.node.style.textAlign='center'; } this.center=function() { $('#'+this.id).dialog('option', 'position', 'center'); } } ``` ` and this is the modal HTML code in my_page.html ``` <div style="display:none;"> <div id="SaisieARModal" title="DATE"> <table class="tableFrame" cellspacing="0px" width="100%"> <tr> <td class="topLeft"> </td> <td class="topCenter"> </td> <td class="topRight"> </td> </tr> <tr> <td class="middleLeft"> </td> <td class="middleCenter"> <table> <tr align="center"> <td> Date </td> <td> <input id="MyTextInputID" type="text" /> </td> </tr> </table> </td> <td class="middleRight"> </td> </tr> <tr> <td class="bottomLeft"> </td> <td class="bottomCenter"> </td> <td class="bottomRight"> </td> </tr> </table> <div> </div> </div> </div> ```

Original source