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

这里的小提琴：JSfiddle

以下是日历的图片下拉菜单：

Answer 1

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

1. jQuery的
2. Moment.js
3. 引导。 js（如果您没有使用完整的Bootstrap，则需要转换和崩溃）
4. 自举日期选择器脚本
5. 引导CSS
6. 引导日期选择器CSS

你缺少了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>