引导日期时间选择器未正确显示

Question

我需要显示输入字段的引导日期时间选择器。它正在工作，但无法正常显示。显示日历，但我看不到更改时间的选项。

HTML 代码：

<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. 引导日期选择器脚本
5. 引导 CSS
6. 引导日期选择器 CSS

您的小提琴中缺少 jQuery、momentjs 和 bootstrap.js。

---

请注意：

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

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

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

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

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

---

这是一个工作示例：

$('#dob').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'
});

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