我想为我的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两次;什么是语法错误?你有一个活的网站或其他脚本加载? –