Question

我对Boostrap datepickers有点问题。

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

问题是，当用户点击一个按钮并且datetimepicker不工作时，使用jQuery创建date2到date6，只有date1.How我可以解决这个问题吗？感谢

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

<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
  });
});

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

2 个答案: