bootstrap twitter datepicker + modal - 日历出现在父屏幕而不是模态屏幕 [英] bootstrap twitter datepicker + modal - calendar coming up in parent screen instead of modal screen

问题描述

我有一个表单（ 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;
}

这篇关于bootstrap twitter datepicker + modal - 日历出现在父屏幕而不是模态屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！