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

Posted 2023-05-08

【中文标题】JQuery-UI 日期选择器不起作用

【英文标题】：JQuery-UI datepicker not functioning

【发布时间】：2016-03-16 01:21:12

【问题描述】：

我正在尝试使用 JQuery UI 日期选择器，但它只显示为普通文本框。当我打开 Google Chrome 调试器时，出现一个错误“Uncaught TypeError: $(...).datepicker is not a function”

这是我的 Bundle.config 文件

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

这是我的观点，底部有脚本代码

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

【问题讨论】：

这应该重新标记为 .Net MVC，Razor 类型问题。您缺少 jquery UI 依赖项。这将使有类似问题的人更有可能发布此帖子。

【参考方案1】：

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

【讨论】：

是的，捆绑包好像不见了。对 jquery 的外部引用存在，但缺少 .datepicker 函数，因为不包含 jquery UI。

是的，就像@Mic 说的那样，你还没有在里面添加带有 jquery ui 的包。不要忘记删除之前放置的 JQuery CDN，并检查示例代码中存在的空格是否也在您的真实代码中；-)