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;
}