JQuery Datepicker 未在 ASP.NET MVC 中显示
Posted
技术标签:
【中文标题】JQuery Datepicker 未在 ASP.NET MVC 中显示【英文标题】：JQuery Datepicker is not showing in ASP.NET MVC 【发布时间】：2018-09-15 09:56:08 【问题描述】：当我点击文本框时没有显示日期选择器。
我的视图代码如下。
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<title>Plane_Schedule</title>
</head>
<section class="registersection">
<div class="container-fluid">
<div class="row">
<div class="signupForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
@using (Html.BeginForm("SaveSchedule", "Users", FormMethod.Post))
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="Form1">
<div class="row">
<div class="Form1">
<div class="form-group col-sm-4">
<div class="editor-field">
<label>
FROM
@Html.EditorFor(model => model.Plane_LocFrom)
</label>
@Html.ValidationMessageFor(model => model.Plane_LocFrom)
</div>
</div>
<div class="form-group col-sm-4">
<div class="editor-field">
<label>
TO
@Html.EditorFor(model => model.Plane_LocTo)
</label>
@Html.ValidationMessageFor(model => model.Plane_LocTo)
</div>
</div>
</div>
<div class="Form2">
<div class="form-group col-sm-4">
<div class="editor-field">
<label>
Departure Time
@Html.EditorFor(model => model.Time_Dep, new @class = "datepicker" )
</label>
@Html.ValidationMessageFor(model => model.Time_Dep)
</div>
</div>
<div class="form-group col-sm-4">
<div class="editor-field">
<label>
Arrival Time
@Html.EditorFor(model => model.Time_Arrive, new @class = "datepicker" )
</label>
@Html.ValidationMessageFor(model => model.Time_Arrive)
</div>
</div>
</div>
</div>
</div>
<p>
<input type="submit" value="Register" />
</p>
</div>
</div>
</div>
</div>
</section>
@section scripts
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(function ()
$(".datepicker").datepicker(
dateformat: "yy/mm/dd",
changemonth=true,
changeyear=true,
minDate: new Date(2018, 0, 1),
maxDate: new Date(2019, 0, 1),
showOn="both",
buttonText:"Select"
);
);
</script>
我想在用户输入时在 Time_Arrive 和 Time_Dep 文本框上显示日期选择器。我也添加了 JQuery ui 脚本。我的 JQuery 函数写在上面。我希望用户输入 2018 年到 2019 年之间的日期。
【问题讨论】：
【参考方案1】：您需要在 jQuery UI 脚本之前包含对 jQuery 库的引用。
更改此部分：
@section scripts
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
在上面的代码 sn-p 中，您引用了 jQuery UI 两次（一个缩小版和一个普通版）。你只需要其中一个，但是为了让 jQuery UI 工作，你首先需要引用 jQuery 库，如下所示。
到这里：
@section scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
【讨论】：
请再次检查我的问题。我还在 head 中引用了 jQuery 脚本。 @StackDeveloper 在头部，您引用了 jQuery UI，而不是 jQuery，并且对 JS 文件的引用不应放在此处。您应该只在标题中引用 CSS 文件。您在脚本部分正确引用了 JS 文件，但只是缺少 jQuery 引用，我已经更新了答案以显示这一点。【参考方案2】：变化：
@Html.EditorFor(model => model.Time_Dep, new @class = "datepicker" )
@Html.EditorFor(model => model.Time_Arrive, new @class = "datepicker" )
到：
@Html.EditorFor(model => model.Time_Dep, new htmlAttributes = new @class = "datepicker" )
@Html.EditorFor(model => model.Time_Arrive, new htmlAttributes = new @class = "datepicker" )
Html.EditorFor 是：
public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object additionalViewData);
Html.TextBoxFor 是（略有不同）：
public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes);
另请注意，您在视图中引用了两次jquery-ui-1.12.1，分别是缩小版和非缩小版。最好检查以确保 jQuery 本身在您的布局中的某处被引用，并且您没有错误地引用 jquery-ui。
【讨论】：
请再次检查我的问题。我还在 head 中引用了 jQuery 脚本。 @Stack Developer jquery-ui-1.12.1.min.js（在你的问题中）不是 jquery，它是 jquery UI。两者都需要，jQuery UI 上面引用了 jQuery【参考方案3】：您的脚本部分应如下所示。 Jquery 参考在任何依赖它的东西之前。
这是Fiddle
@section scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
also add the jquery UI css
@section styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"
rel="stylesheet">
【讨论】：
我已更改此设置，但仍未显示。请再次检查我的问题。我也在head中引用过。 你需要 jquery AND jqueryui 但 jquery 首先。老兄，它们是两个不同的库。以上是关于JQuery Datepicker 未在 ASP.NET MVC 中显示的主要内容，如果未能解决你的问题，请参考以下文章
Gridview Jquery DatePicker中的Asp.Net UpdatePanel
jquery datepicker和asp.net c#空值
ASP.Net MVC jQuery UI DatePicker 日期格式