Click here to Skip to main content
15,877,384 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...

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