用於引導程序3的Eonasdan DateTimePicker無法正常工作

Question

我正在嘗試為我的Asp.Net MVC 5項目使用此 datetimepicker。 該項目使用默認的Bootstrap3布局。 這個datetimepicker的github項目可以在這里找到。

如前所述，我在網站中加入了js和css文件。

對於我的datetimepicker，我已經從網站復制了確切的代碼

@{
    ViewBag.Title = "CreateAppointment_SetDate";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Scripts.Render("~/Scripts/jquery.min.js")
    @Scripts.Render("~/Scripts/moment.min.js")
    @Scripts.Render("~/Scripts/Bootstrap/transition.js")
    @Scripts.Render("~/Scripts/Bootstrap/collapse.js")
    @Scripts.Render("~/Scripts/bootstrap.min.js")
    @Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js")
    <link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css"/>

}

    <div class="col-md-10">
        <div class='well'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>

這就是我所看到的

問題是，當我單擊日歷圖標時，什么也沒發生。 沒有datetimepicker，並且日歷圖標不可單擊。 在控制台中，它說Bootstrap requires jQuery但是在網絡上我可以看到正在加載jquery。

任何人都可以提出問題所在嗎？

EDIT1：

@{
    ViewBag.Title = "CreateAppointment_SetDate";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Scripts.Render("~/Scripts/jquery-2.1.0.min.js")
    <script src="~/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="~/Scripts/moment.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
}



    @Html.HiddenFor(m=>m.AppointmentId)
    <h3>When should appointment take place?</h3>
    <h4>Please select the date range for the appointment to take place between</h4>
    <h6>Please select a start date</h6>

    <div class="col-md-10">
        <div class='well'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker();
            });
        </script>
    </div>

EDIT2

jquery.min.js是我從網站獲得的文件，我查看了網站網絡，將jquery.min.js文件鏈接復制並添加到我的項目中。 當我評論@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")行時：

@{
    ViewBag.Title = "CreateAppointment_SetDate";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @*@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")*@
    <script src="~/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="~/Scripts/moment.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
}



    @Html.HiddenFor(m=>m.AppointmentId)
    <h3>When should appointment take place?</h3>
    <h4>Please select the date range for the appointment to take place between</h4>
    <h6>Please select a start date</h6>
    <div class ="container">
        <div class="col-md-10">
            <div class='well'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker2').datetimepicker();
                });
            </script>
        </div>
    </div>

在控制台中：

用注釋@*<script src="~/Scripts/jquery.min.js" type="text/javascript"></script>*@行編輯2

Answer 1

您正在使用2個jquery版本。 我不知道jquery.min.js是哪個版本？

嘗試刪除此行@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")

Answer 2

我不知道如何，但是bootstrap-datetimepicker.min.js擁有css文件中的所有html代碼。 然后，我從git項目復制了js代碼，現在看來工作正常。 另一方面，這是示例中的樣子

這就是我的樣子

另外，當我將鼠標懸停在日期上時，我沒有手形圖標，而我得到了Curson圖標