JQuery-UI datepicker not functioning

Question

I am trying to use the JQuery UI date picker but it only displays as a normal textbox. When I open the Google Chrome debugger there is one error "Uncaught TypeError: $(...).datepicker is not a function"

This is my Bundle.config file

using System.Web;
using System.Web.Optimization;

namespace ultimateorganiser
{
    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 - ui.min.js",
                        "~/Scripts/Scripts/jquery-ui.js",
                        "~/Scripts/jquery-{version}.js"));

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

            // 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"));

            //JQuery bxSlider
            bundles.Add(new ScriptBundle("~/bundles/slider").Include(
                "~/Scripts/jquery.bxslider.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/jquery - ui.css",
                      "~/Content/site.css"));
        }
    }
}

This is my view with the script code at the bottom

@model ultimateorganiser.Models.ClubMember
@{
    ViewBag.Title = "Register";
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

   //UserDob
    <div class="form-group">
        @Html.LabelFor(model => model.UserDoB, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.UserDoB, new { id = "userdob" })
            @Html.ValidationMessageFor(model => model.UserDoB, "", new { @class = "text-danger" })
        </div>
    </div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
    $(document).ready(function () {
        $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
    });
    </script>
}

This should be retagged as a .Net MVC, Razor type issue. You're missing jquery UI dependencies. It would make this post more likely to come up for people with a similar issue. — Mic
– Mic, Commented Dec 10, 2015 at 12:15

koninos · Accepted Answer · 2015-12-10 12:11:05Z

1

I think you need to add @Scripts.Render("~/bundles/jquery") in your view.

answered Dec 10, 2015 at 12:11

koninos

5,4275 gold badges33 silver badges50 bronze badges

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

2 Comments

Mic Over a year ago

Yeah, the bundle looks like it's missing. The external reference to jquery is there, but the .datepicker function is missing because jquery UI isn't inlcuded.

D4rkTiger Over a year ago

Yeah, like says @Mic, you haven't add the bundle with jquery ui inside. Don't forget to remove the JQuery CDN put before and check that spaces present in your sample code aren't in your real code too ;-)

Collectives™ on Stack Overflow

JQuery-UI datepicker not functioning

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related