Trouble with JQuery DatePicker in .NetCore 2.0 MVC

Question

Hi,

I seem to be struggling to get the Jquery datepicker working in my basic CRUD application. I have used NuGet Package Manger to install Jquery UI.Combined library:

https://ibb.co/mmEfic

In my _Layout.cshtml file I have the following script tags:

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>

(The _Layout.cshtml is referenced in my ViewStart file)

Finally, I am trying to use the Datepicker in my View:

@model GymTracker.ViewModel.MemberViewModel

@{
    ViewData["Title"] = "Create";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">



<h2>Create</h2>

<h4>Member</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DateOfBirth" class="control-label"></label>

           @Html.TextBox("datetimepicker")


            </div>
            <div class="form-group">
                <label asp-for="PaymentType" class="control-label"></label>
                @Html.DropDownListFor(model => model.PaymentType, Html.GetEnumSelectList(typeof(Membershiptype)))

                <span asp-validation-for="PaymentType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>




@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Can anyone see what I am doing wrong. Surely the line :

@Html.TextBox("datetimepicker")

Would render the Jquery date picker?

Any help would be appreciated. Thank you

Welcome to the Treehouse Community

Looking to learn something new?

Derek Vha

Derek Vha

Trouble with JQuery DatePicker in .NetCore 2.0 MVC