gpt4 book ai didi

javascript - 实现 Jquery 日期时间选择器

转载 作者:行者123 更新时间:2023-12-03 02:53:18 26 4
gpt4 key购买 nike

我正在尝试将 JQuery Datetimepicker 实现到我的 MVC 应用程序中。我已将所有引用添加到此中,但仍然抛出错误

获取http://localhost:53987/Home/assets/img/demo/m2.jpg 404(未找到)

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 代码:

<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>

请大家指导一下。我不明白我哪里出了问题。相同的代码适用于我的另一个应用程序。非常感谢任何帮助。

最佳答案

因为你有@Scripts.Render("~/bundles/jquery")在你的Layout.cshtml @RenderBody() 之后的文件,您包括 jQuery-{version}.js 的副本( bundle 中的那个)在jquery-ui.js之后在您的 View 中的脚本,它会清除 jquery-ui .

删除jquery-1.12.4.js脚本和 $.noConflict(); View 中的代码行,并将所有脚本包装在 @section scripts 内的 View 中以便脚本按正确的顺序加载。

@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>
}

请注意,因为您的 bundle 和 @RenderSection("scripts", required: false)在您的布局中紧接在结束之前 </body>标签,没有必要将脚本包装在 $(document).ready(function () { 中.

此外,您应该移动您的 jquery-ui.css文件到样式部分。

在布局中,添加@RenderSection("styles", false)之后@Styles.Render("~/Content/css")并在 View 中

@section styles {
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
}

关于javascript - 实现 Jquery 日期时间选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47745087/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com