Question

我的表单中有两个bootstrap datepickers。 datepicker没有关闭，当我打开第二个时，它与第一个重叠。我怎么能解决这个问题？这是我的代码：

<div class="col-sm-10">
<input id="beginn" class="datepicker form-control">
<script>
    $(function() {
    $('.datepicker').datepicker();
    });

</script>
</div>

  <div class="col-sm-10">
 <input id="end" class="datepicker form-control">
 <script>
    $(function() {
    $('.datepicker').datepicker();
    });

</script>
</div>

Answer 1

只删除第一个脚本，因为您为datepicker类的所有元素调用了datepicker插件

$(function() {
    $('.datepicker').datepicker();
});

检查this

Answer 2

根据我的说法，您的HTML很好，但我会使用col-sm-12代替col-sm-10来全屏显示输入：

<div class="col-sm-12">
  <input id="beginn" class="datepicker form-control">
</div>

<div class="col-sm-12">
  <input id="end" class="datepicker form-control">
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      format: 'yyyy/mm/dd',    // Or whatever format you want.
      startDate: '2015/01/01'  // Or whatever start date you want.
    });
  });
</script>

使用document.ready函数，datepicker控件应该只初始化一次，你现在不应该有重叠的问题。

希望有所帮助！

2 Bootstrap Datepicker相同的表单

2 个答案: