Can't get Jquery datepicker to work in my asp.net mvc project

Question

I have a simple page where i want to add a datepicker to my textboxfor and just modify the format but there is simply nothing showing on the page, I have tried to import all the scripts they said necessary on jquery datepicker documentation here : https://jqueryui.com/datepicker/

Here is my cshtml page on my project with what I have tried to make it work as of now:

@using System.Web.UI.WebControls
@using InscriptionCentreFormation.Controllers
@using InscriptionCentreFormation.Models
@model INSC_Inscription
@{
 ViewBag.Title = "InscriptionFormation";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<br />
@using (Html.BeginForm("InscriptionFormation", "DetailProduit"))
{
    @Html.HiddenFor(m => m.idOccurenceFormation);
    <div style="width:550px;">
        <br />
        <span style="float:left"><b>Date de naissance :</b></span>
        @Html.TextBoxFor(m => m.DateNaissanceChaine, new { Style = "float:right;width:350px;",id="datepicker" })
        <br />
        @Html.ValidationMessageFor(model => model.DateNaissanceChaine, "", new { @class = "text-danger"})      

        </div>
    <input type="submit" class="btn" value="S'inscrire" style="width:200px; text-align:center;"/>
}
<script>
$(document).ready(function () {
    $("#datepicker").datepicker({
        format: 'DD-MM-YYYY'
    });
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

So i don't know what im doing wrong according to the documentation it seems to be pretty simple to implement so maybe im just missing something important because the field only shows as a normal textbox

Any tip would be really helpful

Update

here is the error from the console :

TypeError: $(...).datepicker is not a function

Finally I found the problem it seems that jquery-ui was already loaded on the layout page and created problems since it was loaded twice

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

Because you are loading jquery and jquery-ui after initialization of datepicker. — mmushtaq
– mmushtaq, Commented May 15, 2017 at 13:14
You do not have an textbox with id="datepicker". Change the script to $("#DateNaissanceChaine").datepicker({ ... (you have added that id to the validation message placeholder) — user3559349
– user3559349, Commented May 15, 2017 at 13:14
Actually he has an element with id="datepicker" but it is not textbox. It is validation message. — mmushtaq
– mmushtaq, Commented May 15, 2017 at 13:19
Do not change the code in your question and invalidate the comments and answers that have been added. — user3559349
– user3559349, Commented May 15, 2017 at 13:26

Rory McCrossan · Accepted Answer · 2017-05-15 13:18:07Z

2

The problem is because you're trying to use the datepicker library before you've included it in the page. Put the <script> block containing your code after the references to jQuery.js and jQueryUI.js.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(document).ready(function () {
    $("#datepicker").datepicker({
      format: 'DD-MM-YYYY'
    });
  });
</script>

Also note that you put the datepicker id on the validation label, not on the input element as it should be:

@Html.TextBoxFor(m => m.DateNaissanceChaine, new { Style = "float: right; width: 350px;", id = "datepicker })
<br />
@Html.ValidationMessageFor(model => model.DateNaissanceChaine, "", new { @class = "text-danger" })

I'd also strongly suggest you put the styling rules in classes, then add those classes in the HTML. putting inline styles in the HTML just makes the code muddy, and isn't a good separation of concerns

edited May 15, 2017 at 13:18

answered May 15, 2017 at 13:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Missing_DLL Over a year ago

I put it before and still nothing shows on the page

Rory McCrossan Over a year ago

That's because you set the datepicker id on the ValidationMessageFor, when it should be in the TextBoxFor instead. I updated my answer for you

Rory McCrossan Over a year ago

In that case please check the console and report any errors you find

Rory McCrossan Over a year ago

The error you edited in to the question implies you haven't included jqueryUI properly, or are still trying to execute datepicker() in the wrong place. In isolation your code works fine: jsfiddle.net/8rs7sf5p

Missing_DLL Over a year ago

I guess the problem is in my project then so thanks for the help anyway

Anup Sharma · Accepted Answer · 2017-05-15 13:23:17Z

0

Move this script

<script>
$(document).ready(function () {
    $("#datepicker").datepicker({
        format: 'dd-mm-yy'
    });
});

below Jquery Import

Also move the id="datepicker" to TextBoxFor().

edited May 15, 2017 at 13:23

answered May 15, 2017 at 13:13

Anup Sharma

2,10322 silver badges32 bronze badges

Collectives™ on Stack Overflow

Can't get Jquery datepicker to work in my asp.net mvc project

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related