一页中有多个 Bootstrap 日期选择器

Question

我对 Boostrap 日期选择器有一点问题。

$('#date1,#date2,#date3,#date4,#date5,#date6').datetimepicker({
      language:  'es',
      weekStart: 1,
      todayBtn:  1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      minView: 2,
      forceParse: 0
});

问题是当用户单击按钮并且 datetimepicker 不起作用时，从 date2 到 date6 是用 jQuery 创建的，只有 date1。我该如何解决这个问题？谢谢

Answer 1

添加作为澄清类评论的答案。在新添加的元素上使用一个类，然后通过附加到正文或文档来创建日期选择器，例如：

<div class='input-group date datepicker-me-class' id='date2'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

现在附加到文档中：

$(document).on('focus', ".datepicker-me-class", function() {
  $(this).datepicker({
    language: 'es',
    weekStart: 1,
    todayBtn: true,
    autoclose: true,
    todayHighlight: true,
    startView: 2,
    minViewMode: 2,
    forceParse: false
  });
});

Answer 2

DEMO：它似乎正在工作，可能是您添加的选项，例如

 language:  'es',
  weekStart: 1,
  todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0

正在产生问题，如果这些选项可用，请检查您使用的 datetimepicker 版本。

$('#datetimepicker1,#datetimepicker2,#datetimepicker3,#datetimepicker4').datetimepicker();

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
            <div class="input-group date" id="datetimepicker2">
                <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
            <div class="input-group date" id="datetimepicker3">
                <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
            <div class="input-group date" id="datetimepicker4">
                <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>