JQuery Datepicker is not showing in ASP.NET MVC

Question

Datepicker is not showing when I click on the textbox.

My view code is as follow .

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

I want to show the datepicker on Time_Arrive and Time_Dep textboxes when user enter it. I have added the JQuery ui script as well. My JQuery function is written above. I want the user to enter the date between 2018 and 2019.

j9070749 · Accepted Answer · 2018-04-05 20:27:07Z

3

You need to include a reference the jQuery library before the jQuery UI Script.

Change this section:

@section scripts{
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    }

In the above code snippet you are referencing jQuery UI twice (one minified version and one regular version). You only need one of these, but in order for the jQuery UI to work, you first need to reference the jQuery library like below.

To this:

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

edited Apr 5, 2018 at 20:27

answered Apr 5, 2018 at 15:39

j9070749

9552 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stack Developer Over a year ago

Please check my question again. I have also referenced jQuery script in head.

j9070749 Over a year ago

@StackDeveloper In the head, you have referenced jQuery UI, not jQuery and references to JS files should not be placed here. You should only reference CSS files in the header. You are referencing the JS files correctly in the scripts section but are just missing the jQuery reference, I've updated my answer to show this.

RickL · Accepted Answer · 2018-04-05 16:21:54Z

1

Change:

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

to:

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

Html.EditorFor is:

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

Html.TextBoxFor is (slightly different):

public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes);

Also note, you've referenced jquery-ui-1.12.1 twice in your View, the minified and non-minified version. Best to check to make sure that jQuery itself is referenced somewhere in your layout and that you haven't mistakenly referenced jquery-ui.

edited Apr 5, 2018 at 16:21

answered Apr 5, 2018 at 15:42

RickL

3,42410 gold badges42 silver badges41 bronze badges

2 Comments

Stack Developer Over a year ago

Please check my question again. I have also referenced jQuery script in head.

RickL Over a year ago

@Stack Developer jquery-ui-1.12.1.min.js (in your question) is not jquery, it is jquery UI. You need both, with jQuery referenced above jQuery UI

Leonardo Wildt · Accepted Answer · 2018-04-05 16:33:01Z

0

Your script section should look like below. Jquery reference goes before anything that depends on it.

Heres a 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">
}

answered Apr 5, 2018 at 16:33

Leonardo Wildt

2,5975 gold badges34 silver badges61 bronze badges

2 Comments

Stack Developer Over a year ago

I have changed this but still not showing. Please check my question again. I have also referenced in head.

Leonardo Wildt Over a year ago

You need jquery AND jqueryui but jquery first. They are two different libraries my dude.

Collectives™ on Stack Overflow

JQuery Datepicker is not showing in ASP.NET MVC

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related