bootstrap twitter datepicker + modal - calendar coming up in parent screen instead of modal screen

Question

I have a form (Payment.php) which I am displaying in a modal screen using twitter bootstrap. In the form I have a date field for which I found this bootstrap plugin.

But the problem is the calendar is loaded in the parent screen (Index.php) and not on the modal form where it is actually required.

Can anyone suggest a solution to this.

Following is the code that I have tried.

Imports:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

PHP:

<div class="controls">
        <input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" >
        </div>

JS:

$('#dp2').datepicker();

Answer 1

Add z-index to .datepicker class and make more than .modal

.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Answer 2

After several tests, I can confirm again my comment to the answer of @m4k: The z-index solution via CSS file does not work on Firefox 19 and 20 on OS X. Chrome works though. I did not further test it on other browsers or OS.

The solution which works for me, is to set the z-index via jquery-ui's datepicker config as shown below:

$('#datepicker').datepicker({ 
    beforeShow: function() { $('#datepicker').css("z-index", 1051); }
});

where the z-index should be higher as the one of the modal (in bootstrap 2.3, the modal has 1050).

A even more advanced solution could be to call a method in beforeShow that determines the currently highest z-index on the page automatically. On http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex you find an example.

---

Update: Automatically set the z-index 1 higher than the modal

Easy sample how to determine what the z-index is of the underlying modal:

$("#datepicker").closest(".modal").css("z-index")

Thus, the beforeShow method becomes

$('#datepicker').datepicker({ 
    beforeShow: function() { 
      var $datePicker = $("#datepicker");
      var zIndexModal = $datePicker.closest(".modal").css("z-index");
      $datePicker.css("z-index", zIndexModal + 1); 
    }
});