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:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery-ui")
@Scripts.Render("~/bundles/bootstrap")
@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 ()
{
$('.date-picker').datepicker();
})
</script>
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.