DarkKnightFan DarkKnightFan - 2 months ago 16
PHP Question

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

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

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