Alex Rivera | Logout

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

Asked 2010-01-13T16:27:32.310
15

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
jquery datepicker jquery-ui-datepicker uidatepicker
Edit
Report

2 Answers

19

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>
answered 2010-01-15T16:39:13.907
1

In jquery-ui-1.8.1.custom.css (or whatever version of jquery ui you have) modify

.ui-datepicker

class from

{ width: 17em; padding: .2em .2em 0; }

to

{ width: 17em; padding: .2em .2em 0; z-index:99999; }

That worked for me and date picker works excellent inside modal dialog!

answered 2011-03-25T08:56:35.973

Your Answer