Bootstrap Datetimepicker无法正常显示

Question

我需要为输入字段显示bootstrap datetimepicker。它正在工作但没有正确显示。显示日历，但我看不到更改时间的选项。

HTML code：

<div class="form-group">
  <p>Date of Birth <span>*</span></p>
  <input type="text" name="dob" id="dob" max="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/>
</div>

JavaScript代码：

$(document).ready(function() {
  $(function () {
    $('#dob').datetimepicker();
  });
});`

我使用的依赖项列表：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

这是小提琴：JSfiddle

以下是日历下拉列表的图片：

Answer 1

从文档的Installing部分，组件需要：

1. 的jQuery
2. Moment.js
3. Bootstrap.js（如果你没有使用完整的Bootstrap，则需要转换和折叠）
4. Bootstrap Datepicker脚本
5. Bootstrap CSS
6. Bootstrap Datepicker CSS

你在小提琴中缺少jQuery，momentjs和bootstrap.js。

请注意：

• 您必须使用format选项告诉选择器格式化日期的格式。您可以使用'YYYY-MM-DD HH:mm'。

• 您将在控制台中出现以下错误：

    

  未捕获错误：datetimepicker组件应放在非静态定位容器中

  如果您不更改HTML结构，请参阅docs以获取一些示例。

• 如果要通过数据属性初始化选择器的选项，则必须使用data-date-*。您可以使用data-date-max-date设置maxDate选项。有关更多示例，请参阅here。

这是一份工作样本：

＆＃13;
＆＃13;
$('#dob').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'
});
＆＃13;
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-lg-12">
  <p>Date of Birth <span>*</span></p>
  <input type="text" name="dob" id="dob" data-date-max-date="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/>
</div>
＆＃13;
＆＃13;
＆＃13;