Why jQuery UI datepicker can't works in jQuery dialog modal ?

Answer 1

Can you clarify which 'modal dialog' you are referring to. I'm assuming its this one:

http://docs.jquery.com/UI/Dialog

Without seeing more of your code, its difficult. It might be useful if you post the accompanying HTML.

One thing to remember however, is that the modal dialog gives you the impression that you are opening a new window, however in reality the content is in the same HTML document as the rest of your content. This can often lead to confusion when assigning element IDs, for example, some duplicates may be specified.

I'm also assuming that you've debugged/tested to the extent that you are sure your selector is working correctly, i.e. is selecting the item(s) that you intend

Answer 2

enter code hereIf you simplify (for a test)

$('#'+newId).dialog({autoOpen: true, modal: true, width:width }); 

and make it:

$('#SaisieARModal').dialog({autoOpen: true, modal: true, width:width }); 

does the modal show up? Also have you tried the bgiframe: true option?

Not sure any of this is totally relevent, but something is putting (most likely) the date picker behind the modal stuff somewhere.

EDIT: One other thing, if you change:

$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); });

to

    $(function() { 
       $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
       $("#MytextInputID").click(function(){alert("working");});
    });

does the alert show up?

Answer 3

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>