2 Bootstrap 日期选择器相同的形式

Question

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

<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

只需删除第一个脚本，因为您使用 class 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函数，日期选择器控件应该只初始化一次，你不应该有现在的重叠问题。

希望对您有所帮助！

2 Bootstrap 日期选择器相同的形式

2 Bootstrap Datepicker same form

html

javascript

twitter-bootstrap