JQuery Datepicker 未在 ASP.NET MVC 中显示答案

【问题标题】：JQuery Datepicker is not showing in ASP.NET MVCJQuery Datepicker 未在 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 年之间的日期。

【问题讨论】：

标签： jquery asp.net-mvc jquery-ui datepicker

【解决方案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 首先。老兄，它们是两个不同的库。