Question

我遇到日期选择器问题。搜索一些答案但似乎没有帮助，这是我的代码：

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../datepicker/css/datepicker.css" />

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" placeholder="Date"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../datepicker/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datepicker();
    });
</script>

Answer 1

＃datetimepicker1应位于输入中，而不应位于 div 中。所以试试这个：

<div class='input-group date'>
    <input type='text' class="form-control" placeholder="Date" id='datetimepicker1' />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Answer 2

请将jQuery选择器更改为$('**.input-group.date**').datepicker();

DIV对于启动datepicker是必要的。请参阅http://jsbin.com/lerojivu/1/edit

源代码中的变体zIndex

place: function ()...

由于使用模态z-index属性为零。它可以在下面修改。

var parentZIndexes = this.element.parents().map(function() {
                           return parseInt($(this).css('z-index')) || 0;
                      });
var zIndex = Math.max.apply(Math, Array.prototype.slice.apply(parentZIndexes)) + 10;

Bootstrap Datepicker似乎不起作用

2 个答案: