实现Jquery Datetimepicker [英] Implement Jquery Datetimepicker
问题描述
我正在尝试在我的MVC应用程序中实现JQuery Datetimepicker.我已经将所有参考添加到其中，但是仍然抛出错误
I am trying to implement JQuery Datetimepicker into my MVC application. I have added all the reference into this but still throwing error
获取http://localhost:53987/Home/assets/img/demo/m2.jpg 404(未找到)
未捕获的TypeError:$不是函数
Uncaught TypeError: $ is not a function
_Layout.cshtml代码
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>@ViewBag.Title - Arion Pedigrees</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Reports</a>
<ul class="dropdown-menu dropdown-menu-left animated-2x animated fadeIn">
<li>@Html.ActionLink("AA", "Index", "Home")</li>
<li>@Html.ActionLink("BB", "Index", "Home")</li>
</ul>
</li>
</nav>
<div class=" ">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
此代码:
@Html.TextBoxFor(m => m.StartDate, new { @class = "form-control"})
@Html.TextBoxFor(m => m.FinishDate, new { @class = "form-control" })
然后是JavaScript代码:
And then JavaScript code:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
$.noConflict();
$(document).ready(function () {
$("#StartDate").datepicker({
numberOfMonths: 1,
onSelect: function (selected) {
$("#FinishDate").datepicker("option", "minDate", selected)
}
});
$("#FinishDate").datepicker({
numberOfMonths: 1,
onSelect: function (selected) {
$("#StartDate").datepicker("option", "maxDate", selected)
}
});
});
</script>
任何人都请引导我.我不明白我要去哪里错了.相同的代码可用于我的另一个应用程序.任何帮助都将受到高度赞赏.
Anyone please guide me. I do not understand where i am going wrong. The same code works for my another application. Any help is highly appreciated.
推荐答案
由于您在@RenderBody()之后的Layout.cshtml文件中包含@Scripts.Render("~/bundles/jquery")，因此要包含jQuery-{version}.js的副本(捆绑包中的一个)在您的视图中jquery-ui.js脚本之后，它会擦除jquery-ui.
Because you have @Scripts.Render("~/bundles/jquery") in your Layout.cshtml file after the @RenderBody(), your including a copy of jQuery-{version}.js (the one in your bundle) after the jquery-ui.js script in your view, which wipes out jquery-ui.
删除视图中的jquery-1.12.4.js脚本和$.noConflict();代码行，并将所有脚本包装在视图中的@section scripts内，以便按正确的顺序加载脚本.
Remove the jquery-1.12.4.js script and the $.noConflict(); line of code in your view, and wrap all your scripts in the view inside @section scripts so that the scripts are loaded in the correct order.
@section scripts {
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#StartDate").datepicker({
....
});
$("#FinishDate").datepicker({
....
});
</script>
}
请注意，由于您的包和布局中的@RenderSection("scripts", required: false)紧接在</body>标记之前，因此不必将脚本包装在$(document).ready(function () {中.
Note that because your bundles and the @RenderSection("scripts", required: false) in your layout are immediately before the closing </body> tag, it is not necessary to wrap your scripts in $(document).ready(function () {.
此外，您应该将jquery-ui.css文件移动到样式部分.
In addition, you should move your jquery-ui.css file into a section for styles.
在布局中，在@Styles.Render("~/Content/css")之后并在视图中添加@RenderSection("styles", false)
In the Layout, add @RenderSection("styles", false) after @Styles.Render("~/Content/css") and in the view
@section styles {
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
}
这篇关于实现Jquery Datetimepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
