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
– Irf, Commented Sep 4, 2016 at 17:10

Asif Rahman · Accepted Answer · 2016-09-04 23:48:48Z

0

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" })

answered Sep 4, 2016 at 23:48

Asif Rahman

2532 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick B · Accepted Answer · 2018-11-05 22:18:42Z

0

Though its too late for you. might help someone who might be looking.

render @Styles.Render("~/Content/themes/base/css") in layout page.

answered Nov 5, 2018 at 22:18

Nick B

2871 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

JqueryUI Datepicker not working ASP.NET MVC5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related