jquery - Bootstrap Datetimepicker 显示不正确

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>

这是 fiddle :JSfiddle

这是日历下拉列表的图片:

Answer 1

来自Installing文档部分，组件需要:

1. jQuery
2. Moment.js
3. Bootstrap.js(如果您没有使用完整的 Bootstrap，则需要转换和折叠)
4. 引导日期选择器脚本
5. 引导 CSS
6. 引导日期选择器 CSS

您的 fiddle 中缺少 jQuery、momentjs 和 bootstrap.js。

---

请注意:

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

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

  Uncaught Error: datetimepicker component should be placed within a non-static positioned container

  如果您不更改 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>