引导日期选择器没有响应

Question

我在 div 中有一个引导日期选择器。一切正常，直到我减小窗口的尺寸。 代码如下：

<div class="col-md-3">
  <p> Pick a Date: </p>
  <div class="datepicker input-group" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>
<div class="col-md-3">
   <p>Choose a Campaign:</p>
   <select id="selectCampaign" class="form-control">
      <option value="opt1" id="opt1">opt1</option>
      <option value="opt2" id="opt2">opt2</option>
   </select>
</div>
<div class="col-md-3">
  <a class="btnSearch" href="#">Search</a>
</div>

$(document).ready(function () {
    $('.datepicker').datetimepicker({
        format: 'DD/MM/YYYY',
    });
});

这里是“错误”：

这是正常的应用行为：

Answer 1

确保您使用的是最新版本的引导程序。否则，它应该按预期运行。参考我下面的回答。希望这就是你要找的。​​p>

编辑

我认为，您犯的主要错误是没有为日期选择器提供 id。只有当提供并调用 id 时，日期选择器才会响应。查看我修改过的代码 sn-p。

为日期选择器定义一个 ID，如下所示。

<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">

日期选择器代码 sn-p

$(document).ready(function() {
  $(function() {
    $('#datetimepicker1').datetimepicker({format: 'DD/MM/YYYY'});
  });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<div class="col-md-3">
  <p> Pick a Date: </p>
  <div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-th"></span>
    </div>
  </div>
</div>
<div class="col-md-3">
   <p>Choose a Campaign:</p>
   <select id="selectCampaign" class="form-control">
      <option value="opt1" id="opt1">opt1</option>
      <option value="opt2" id="opt2">opt2</option>
   </select>
</div>
<div class="col-md-3">
  <a class="btnSearch" href="#">Search</a>
</div>

希望现在可以使用