bootstrap twitter datepicker + modal - 日历出现在父屏幕而不是模态屏幕

问题描述:

我有一个表单( Payment.php ),我使用twitter bootstrap在模态屏幕中显示。
在表单中我有一个日期字段,我找到了这个引导程序插件。

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.

但问题是日历是在父屏幕上加载的( Index.php ),而不是在实际模式下的日历需要。

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.

进口:

<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();


将z-index添加到.datepicker类并制作更多比.modal

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