我正在尝试使用 this我的 Asp.Net MVC 5 元素的日期时间选择器。该元素使用默认的 Bootstrap3 布局。可以找到这个 datetimepicker 的 github 元素 here .
如前所述,我在我的 View 中包含了 js 和 css 文件。
对于我的日期时间选择器,我从网站上复制了准确的代码
@{
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>
这就是我所看到的
问题是当我点击日历图标时,没有任何反应。没有日期时间选择器,日历图标不可点击。在控制台中显示 Bootstrap requires jQuery
但是在网络中我可以看到正在加载 jquery。
任何人都可以提出问题所在吗?
编辑1:
@{
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>
编辑2
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>*@
线
最佳答案
您正在使用 2 个 jquery 版本。我不知道 jquery.min.js 是哪个版本?
尝试删除这一行 @Scripts.Render("~/Scripts/jquery-2.1.0.min.js")
关于jquery - Bootstrap 3 的 Eonasdan DateTimePicker 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21623197/