0

https://jqueryui.com/datepicker/

enter image description here

The jQuery UI datepicker looks like the above but my version looks like the following. enter image description here

My jQuery file is

enter image description here

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        /*"~/Scripts/jquery-{version}.js",*/
                        "~/Scripts/jquery-1.12.4.min.js"));

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

                        "~/Scripts/jquery.switchButton.js",
                        "~/Scripts/jquery-ui.min.js"
                        ));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
                        "~/Scripts/media/js/jquery.dataTables.js"));

            bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                        "~/Scripts/moment.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            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 added the latest stable versions of jQuery and jQuery UI and changed the bundle config to avoid a duplication error(which is what I had to start with see Uncaught TypeError: undefined is not a function in datepicker)

enter image description here

One StackOverflow answer says that moment.js should be above jQuery UI but I didnt find any change, and now I'm entirely stumped as not seen jQuery UI partially work like this before. Please help!

Community
  • 1
  • 1
Andrew Day
  • 563
  • 10
  • 23

1 Answers1

2

The answer is simple.. You haven't added reference to jquery-ui.css. Its just working fine but the styles/CSS aren't applied.

Get the respective version of CSS through the links mentioned in this answer

Community
  • 1
  • 1
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200