时间戳

首页 > 解决方案 > 引导日期选择器没有响应

javascript - 引导日期选择器没有响应

问题描述

我在 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',
    });
});

这是“错误”：
这是

这是正常的应用程序行为：
这是正常的应用程序行为

标签： javascripthtmlbootstrap-4responsivebootstrap-datepicker

解决方案

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

编辑

我认为，您犯的主要错误是没有为 datepicker 提供 id。只有在提供和调用 id 时，datepicker 才会响应。查看我修改过的代码片段。

为 datepicker 定义一个 id，如下所示。

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

日期选择器代码片段

$(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>

希望它现在有效

推荐阅读