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>

}

Are you registering jQuery twice with your script tags and also the @Scripts.Render()? — A-A-ron
– A-A-ron, Commented May 6, 2019 at 22:43
Depending on what is going on in your script bundles that may be the problem. I would either remove the script tag or the calls to render those bundles. — A-A-ron
– A-A-ron, Commented May 6, 2019 at 22:57

Ammad Hassan · Accepted Answer · 2025-01-02 06:00:42Z

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.

mallenswe · Accepted Answer · 2019-05-06 21:54:20Z

1

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" });

answered May 6, 2019 at 21:54

mallenswe

426 bronze badges

2 Comments

Ammad Hassan Over a year ago

Still I can't see the datepicker.

mallenswe Over a year ago

I see that the out put of the Html.EditorFor will create an input[type=datetime] if the property in the model is DateTime. From this article: c-sharpcorner.com/UploadFile/ee01e6/…

Collectives™ on Stack Overflow

Problem in using jQuery datepicker in asp.net mvc

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related