simple dialog box with datepicker

Question

I have a jquery simple dialog box which works great but one of the text fields I have within the simple dialog box cannot see the datepicker plugin?

Thanks for any help!

 <div style="display:none;" id="simpleDialog1">

 <form>
<fieldset>
    <legend>Legend Name</legend>
    <label for="DateCreated">Date:</label>
    <input type="text" name="DateCreated" class="datepicker" />
        <label for="Status">Status:</label>
    <input type="text" name="Status" />
        <label for="RequestedBy">Requested By:</label>
    <input type="text" name="name" />
        <label for="AssignedTo">Assigned To:</label>
    <input type="text" name="AssignedTo" />
        <label for="Description">Description</label>
    <input type="text" name="Description" />
    <br>
    <input type="submit" name="submit" />
</fieldset>
 </form>
 </div>



$(document).ready(function () {


$('#sdHc1').simpleDialog({
opacity: 0.3,
duration: 500,
title: 'Add Ticket',
open: function (event) {
  console.log('open!');
},
close: function (event, target) {
  console.log('close!');
}
});



$('.datepicker').datepicker();


});

I tried using the datepicker outwith the dialog box and it works perfectly?

Thanks guys!

Answer 1

The datepicker control might be appearing behind the dialog box. Try applying a css style to bring it to the front using the z-index property:

<style type="text/css">
    #ui-datepicker-div
    {
        z-index: 9999999;
    }
</style>

This solution and more information can be found here: http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex