不能讓引導日期時間選擇器正確顯示

Question

我想使用BootStrap DateTimePicker並且它不能正確顯示在屏幕上。我的HTML如下所示。

<div class='input-group date' id='startDate'> 
     <input type='text' class="form-control" name="startDate" /> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
</div> 

而Javascript就像下面這樣。

$(document).ready(function() { 
      // DateTime picker for Dates 
      $("#startDate").datetimepicker(); 
}); 

而我加載我的javascript和css文件的順序如下。

<link href="/Content/css/datepicker.css" rel="stylesheet"/> 
<link href="/Content/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
<link href="/Content/css/bootstrap.css" rel="stylesheet"/> 

<script src="/Scripts/jquery-2.1.0.js"></script> 
<script src="/Scripts/jquery-ui-1.10.0.custom.js"></script> 
<script src="/Scripts/bootstrap-datepicker.js"></script> 
<script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/moment.js"></script> 
<script src="/Scripts/bootstrap-datetimepicker.js"></script> 

通過上面的設置，datetime選擇器顯示如下，沒有任何適當的css。無法正確顯示改變月份的箭頭按鈕。

我試圖改變順序，但仍顯示相同。有人能幫我解決我所缺少的問題嗎？

Answer 1

好吧，看看這個小提琴：

http://jsfiddle.net/8hmcfmLh/1/

你不需要jQuery的用戶界面或自舉日期選擇器，只是自舉的DateTimePicker和moment.js

<div class="input-group date" id="startDate"> 
     <input type="text" class="form-control" name="startDate" /> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
</div> 

$(document).ready(function() { 
    // DateTime picker for Dates 
    $("#startDate").datetimepicker(); 
});