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

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>

通过上面的设置，日期时间选择器显示如下，没有任何正确的CSS。用于更改月份的箭头按钮无法正确显示。

我尝试更改顺序，但仍然显示相同。有人可以帮助我解决我所缺少的问题吗？

Answer 1

好的，请检查这个小提琴：

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

你不需要jquery-ui或bootstrap-datepicker，只需要bootstrap-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();
});