JQuery日期选择器未显示在ASP.NET MVC中_Jquery_Asp.net Mvc_Jquery Ui_Datepicker

JQuery日期选择器未显示在ASP.NET MVC中

jquery asp.net-mvc jquery-ui

JQuery日期选择器未显示在ASP.NET MVC中,jquery,asp.net-mvc,jquery-ui,datepicker,Jquery,Asp.net Mvc,Jquery Ui,Datepicker,当我点击文本框时，Datepicker不显示我的视图代码如下 <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="

当我点击文本框时，Datepicker不显示

我的视图代码如下

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


平面图
@使用（Html.BeginForm（“SaveSchedule”、“Users”、FormMethod.Post））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
从…起
@EditorFor（model=>model.Plane\u LocFrom）
@Html.ValidationMessageFor（model=>model.Plane\u LocFrom）
到
@EditorFor（model=>model.Plane\u LocTo）
@Html.ValidationMessageFor（model=>model.Plane\u LocTo）
出发时间
@EditorFor（model=>model.Time_Dep，new{@class=“datepicker”}）
@Html.ValidationMessageFor（model=>model.Time\u Dep）
到达时间
@EditorFor（model=>model.Time_-arrival，new{@class=“datepicker”}）
@Html.ValidationMessageFor（model=>model.Time\u到达）


}
@节脚本{
}
$（函数（）{
$（“.datepicker”）.datepicker({
日期格式：“年/月/日”，
changemonth=true，
changeyear=true，
minDate：新日期（2018年0月1日），
maxDate：新日期（2019,0,1），
shown=“两者”，
按钮文字：“选择”
});
});

我想在用户输入时显示datepicker on Time_Arrival和Time_Dep文本框。我还添加了jQueryUI脚本。我的JQuery函数写在上面。我希望用户输入2018年到2019年之间的日期

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

@节脚本{
}

在上面的代码段中，您两次引用jQueryUI（一个缩小版本和一个常规版本）。您只需要其中一个，但为了使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>
}

@节脚本{
}

您需要在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>
    }

@节脚本{
}

为此：

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

@节脚本{
}

更改：

@Html.EditorFor(model => model.Time_Dep, new { @class = "datepicker" })
@Html.EditorFor(model => model.Time_Arrive, new { @class = "datepicker" })

致：

Html.EditorFor

是：

public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object additionalViewData);

另外请注意，您在视图中引用了两次

jquery-ui-1.12.1

，即缩小版和非缩小版。最好检查以确保jQuery本身在布局中的某个位置被引用，并且您没有错误地引用

jQuery ui

更改：

@Html.EditorFor(model => model.Time_Dep, new { @class = "datepicker" })
@Html.EditorFor(model => model.Time_Arrive, new { @class = "datepicker" })

致：

Html.EditorFor

是：

public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object additionalViewData);

另外请注意，您在视图中引用了两次

jquery-ui-1.12.1

，即缩小版和非缩小版。最好检查以确保jQuery本身在布局中的某个位置被引用，并且没有错误地引用

jQuery ui

脚本部分如下所示。 Jquery引用在依赖它的任何东西之前

这里有一个

@节脚本{
}
还添加jQueryUICSS
@剖面样式{
}

您的脚本部分应该如下所示。 Jquery引用在依赖它的任何东西之前

这里有一个

@节脚本{
}
还添加jQueryUICSS
@剖面样式{
}

我已对此进行了更改，但仍然没有显示。请再次检查我的问题。我也在head中引用了。您需要jquery和jqueryui，但首先需要jquery。他们是两个不同的图书馆，伙计，我有