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

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:


@RenderSection("scripts", required: false)

I have the following template defined:

@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:

<script type="text/javascript">
$(function () 

Finally, my View contains the following markup:

<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.
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 () {
#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