JQuery-UI日期选择器不起作用

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

Answer 1

我认为您需要在视图中添加@Scripts.Render("~/bundles/jquery") 。