Click here to Skip to main content
14,921,745 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to get the jquery-ui dattimepicker to work in my MVC5 project.

I added jqueryui to BundleConfig.cs, like so

C#
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery"   ).Include("~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include("~/Scripts/jquery-ui-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));
    bundles.Add(new StyleBundle("~/Content/css"       ).Include("~/Content/bootstrap.css", "~/Content/site.css"));
}


I had to move the following to the head section of my _Layout.cs file so that my the script in my view wouldn't throw a "$ not defined" error:

C#
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery-ui")

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)


I have the following template defined:

HTML
@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()), new { @class = "datefield", type = "date"  })


And I have he following javascript markup at the top of my view:

HTML
<script type="text/javascript">
$(function () 
{
    $('.date-picker').datepicker();
})
</script>


Finally, my View contains the following markup:

HTML
<p>Show Date: @Html.TextBoxFor(m => m.ShowDate)</p>


When I left click the input field, a calendar should be displayed, but I get nothing. What am I doing wrong? (I'm totally new to MVC, so be gentle.) The debugger tool console shows no javascript errors.
Posted
Comments
Kornfeld Eliyahu Peter 12-Apr-15 15:53pm
   
You use the wrong class - date-picker, where the class in the MVC part is datefield...
#realJSOP 12-Apr-15 19:16pm
   
That didn't fix it. :(
Kornfeld Eliyahu Peter 13-Apr-15 3:14am
   
Does you scrip-part enclosed inside a @section Scripts {} block?

@section Scripts {
<script type="text/javascript">
$(function () {
alert("!");
$('.datefield').datepicker();
})
</script>
}
#realJSOP 13-Apr-15 5:20am
   
Yes, it's in a {} block. I fingered out what i was doing wrong - I forgot to put , new { @class = "date-picker" } in my TextBoxFor method call. I now have a new problem. The calendar is displayed, but there appears to be no containing div/border.
Kornfeld Eliyahu Peter 13-Apr-15 5:38am
   
Missing jquery ui css...
#realJSOP 13-Apr-15 8:37am
   
I actually came back to say I was missing the css for the various jQuery controls. Added a new bundle for it, and everything is fine (relative term of course, as well as being subject to change).
Kornfeld Eliyahu Peter 13-Apr-15 3:16am
   
And an advice for free...Set the type of your input box to text and not date...Most modern browsers are support date type by adding calendar pop-up, so you will have two of them, one from the browser and an other from jquery-ui...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900