CODEWITHSUNDEEP
c#jqueryasp.net-mvcjquery-ui
Louis-Roch Tessier
Louis-Roch Tessier

Reputation: 823

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

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

Upvotes: 0

Views: 889

Answers (2)

Anup Sharma
Anup Sharma

Reputation: 2083

Move this script 

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

below Jquery Import

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 2

Related Questions