Problem in using jQuery datepicker in asp.net mvc

Question

I want to add Jquery date picker to TimeofCreation Form. I can't get the datepicker nor a select button. Please help in using date picker with jquery.

I want a date calendar to be appear when user clicks the form named TimeofCreation.

Donor class code is mentioned below,

   public class Donor
   {
      [Key]
     public int Id { get; set; }
     public string FullName { get; set; }
     public int PhoneNumber { get; set; }
     public DateTime TimeofCreation { get; set; }
     public string Emergency { get; set; }
     public string Address { get; set; }
     public BloodType BloodList    { get; set; }
     public string BagsNumber { get; set; }
     public DateTime LastTimeDonation { get; set; }

   }

My View code as follows.

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-group">
    @Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { 
    @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.TimeofCreation, new { 
        htmlAttributes = new { @class = "datepicker" } })
        @Html.ValidationMessageFor(model => model.TimeofCreation, "", new 
       { @class = "text-danger" })
        </div>

        </div>


@section Scripts {
    <script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
  

    <script type="text/javascript">
         <script>

    $('.datepicker').datepicker({
        dateFormat: "dd/M/yy",
        changeMonth: true,
        changeYear: true,
        yearRange: "-60:+0"
    });
</script>
    </script>

}

Answer 1

Here issue with you are not added jquery-ui.css file and other issue is you have uploaded multiple time jquery and jquery-ui js files. either use external script js file or use bundle.

and also order of your external script file is wrong, it should be first jquery after use jquery-ui file

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>

for example I used this and remove bundle .

and add your jquery-ui.css file

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

after that you can see your datepicker

after the changes been done ,code looks like as shown below,

@model MVC5.Models.Donor
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-group">
            @Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TimeofCreation, new { htmlAttributes = new { @class = "datepicker" } })
                @Html.ValidationMessageFor(model => model.TimeofCreation, "", new { @class = "text-danger" })
            </div>
    
        </div>
    }
    
    @section Scripts {
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
        <script type="text/javascript">
    
            $('.datepicker').datepicker({
                dateFormat: "dd/M/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-60:+0"
            });
        </script>
    }

i hope this should be helps you. let me know if require more information.

Answer 2

It looks like you are trying to apply the datepicker to input[type=datetime] but I don't see that in the form-group.

Try linking it to the class like this:

$('.datepicker').datepicker({ dateFormat: "dd/M/yy", changeMonth: true, changeYear: true, yearRange: "-60:+0" });