我想爲我的Asp.Net MVC 5項目使用this datetimepicker。該項目使用默認的Bootstrap3佈局。這個datetimepicker的github項目可以找到here。Eonasdan DateTimePicker引導程序3不工作
正如上面提到的網站,我在我看來包含了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>
在控制檯:
編輯2註釋@*<script src="~/Scripts/jquery.min.js" type="text/javascript"></script>*@
線
我可以看到你正在使用兩個不同的jQuery版本:選擇一個,然後重試。 – MarcoL
你可以看看編輯1可能是 – Cybercop
不要加載jQuery兩次;什麼是語法錯誤?你有一個活的網站或其他腳本加載? –