JQuery-UI Datepicker with MVC5

See more:

MVC

jQuery-UI

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.