8

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

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

任何人都可以提出解决方案。

以下是我尝试过的代码。

进口：

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

6 回答 6

15

将 z-index 添加到 .datepicker 类并制作超过 .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;
}
于 2012-09-13T21:18:43.930 回答
8

经过几次测试，我可以再次确认我对@m4k 答案的评论：通过 CSS 文件的 z-index 解决方案在 OS X 上的 Firefox 19 和 20 上不起作用。Chrome 可以。我没有在其他浏览器或操作系统上进一步测试它。

对我有用的解决方案是通过 jquery-ui 的 datepicker 配置设置 z-index，如下所示：

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

其中 z-index 作为模态之一应该更高（在引导程序 2.3 中，模态有 1050）。

一个更高级的解决方案可能是调用一个方法beforeShow来自动确定页面上当前最高的 z-index。在http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex你可以找到一个例子。

更新：自动设置 z-index 1 高于模态

简单示例如何确定底层模态的 z-index 是什么：

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

因此，该beforeShow方法变为

$('#datepicker').datepicker({ 
    beforeShow: function() { 
      var $datePicker = $("#datepicker");
      var zIndexModal = $datePicker.closest(".modal").css("z-index");
      $datePicker.css("z-index", zIndexModal + 1); 
    }
});
于 2013-02-26T23:57:17.837 回答
4

..这些都不适合我。我正在运行 bootstrap 2.3.2，无论我如何通过 javascript 尝试，bootstrap 的 javascript 总是会将 datepicker 的 z-index 重置回（在我的情况下）21。当然，有一种方法可以在 javascript 中做到这一点，但我找到相当干净的css方式。

所以，这成功了：

/* otherwise datepickers won't show in a modal dialog */
.datepicker {
    z-index:1051 !important;
}
于 2013-08-06T08:41:00.827 回答
0

我遵循了 beforeShow 方法，但必须从输入中获取最接近的模态用于 z-index 计算，然后确保在单独的 div 上设置 z-index，即日历。

var DEFAULT_Z_INDEX = 10;

$('#my-date-input')
    .datepicker()
    .on('show', function() {

        // Make sure that z-index is above any open modal.
        var $input= $(this);
        var modalZIndex = $input.closest('.modal').css('z-index');
        var zIndex = DEFAULT_Z_INDEX;
        if (modalZIndex) {
            zIndex = parseInt(modalZIndex) + 1;
        }

        $('.datepicker').css("z-index", zIndex);
    });
于 2013-11-06T18:39:12.347 回答
0

html 

 <!-- Text input-->
<div class="form-group"> 
    <label class="col-sm-2 control-label" for="textinput">Date TO</label>
    <div class="col-sm-10">
      <input   type="text" id="DateToP"  name="DateToP" placeholder="Post Code" class="form-control datepicker">
    </div> 
</div>

css

<style type="text/css">
 .datepicker {
    z-index:1051 !important;
  }
</style>

jQuery

   $('#DateToP').datepicker({
       format: 'yyyy-mm-dd',
      autoclose: true
  });
于 2016-09-15T04:14:36.530 回答
-1

我用了一个显示器：无；.datepicker 的 CSS 文件的属性。这很好用。

于 2013-10-01T18:44:35.167 回答