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