javascript - 无法让 Bootstrap 日期时间选择器正确显示

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

好的，检查这个 fiddle :

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();
});