JqueryUI Datepicker not working ASP.NET MVC5

Question

I installed jqueryUI combined

    Install-Package jQuery.UI.Combined

Bundled them in bundleconfig like so:

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

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css",
      "~/Content/themes/base/jquery.ui.resizable.css",
      "~/Content/themes/base/jquery.ui.selectable.css",
      "~/Content/themes/base/jquery.ui.accordion.css",
      "~/Content/themes/base/jquery.ui.autocomplete.css",
      "~/Content/themes/base/jquery.ui.button.css",
      "~/Content/themes/base/jquery.ui.dialog.css",
      "~/Content/themes/base/jquery.ui.slider.css",
      "~/Content/themes/base/jquery.ui.tabs.css",
      "~/Content/themes/base/jquery.ui.datepicker.css",
      "~/Content/themes/base/jquery.ui.progressbar.css",
      "~/Content/themes/base/jquery.ui.theme.css"));

My view:

<div class="input-group input-group-sm center-box">
                    <div class="text-font">Date of birth</div>
                    @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "date-picker" })

and scirpt:

          <script type="text/javascript">
    $(function () {
        // This will make every element with the class "date-picker" into a DatePicker element
        $('#DateOfBirth').datepicker();
    })
</script>
                </div>

And it looks like this

Any thoughts?

Make sure you are using referencing jquery before jquery-ui e.g., <link rel="stylesheet" href="@Url.Content("//code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css")"> <script src="@Url.Content("//code.jquery.com/jquery-1.12.4.js")"></script> <script src="@Url.Content("//code.jquery.com/ui/1.12.0/jquery-ui.js")"></script> — Irf

Asif Rahman Asif Rahman · Accepted Answer · 2016-09-04T23:48:48

make sure you added the jquery css and js reference correctly (better you can use cdn link)
try giving that textbox id with "DateOfBirth" like that @Html.TextBoxFor(m => m.DateOfBirth, new { @Id= "DateOfBirth", class = "date-picker" })

JqueryUI Datepicker not working ASP.NET MVC5

2 Answers