jquery datepicker错误不是一个函数答案

【问题标题】：jquery datepicker error not a functionjquery datepicker错误不是一个函数
【发布时间】：2015-12-24 22:42:09
【问题描述】：

我的错误：

Uncaught TypeError: $(...).datepicker is not a function

我将 jquery 包引用放在布局的 head 部分，以确保它在 javascript 函数之前被加载。我做了一个查看源代码并没有看到超过 1 个对 jquery 的引用。 jquery 版本是 2.1.4。有什么想法吗？

我的看法：

<script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function(dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
</script>

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

_布局

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Vibe Productions Corporation</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

</head>

Bundles.cs

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

【问题讨论】：

已编辑以显示我的捆绑包。但是，是的，我也包含了 jquery ui
我对您使用 onClose 函数所做的事情感到困惑。日期选择器已将所选日期放入文本框中，那么您为什么要执行该操作？
@Bindrid，如果我没有 onclose 功能，则所选日期不会为我保存在文本框中

标签： javascript jquery model-view-controller datepicker

【解决方案1】：

目前您只是在 jQuery UI 包中引用 jQuery 库

"~/Scripts/jquery-ui-1.11.4/jquery-{version}.js"));

这应该是：

"~/Scripts/jquery-ui-1.11.4/jquery-ui.js"));

【讨论】：

【解决方案2】：

我在 IE、FireFox 和 Edge 中运行它没有问题。我找到了您的示例的来源，唯一认为我看到的不同之处是月份中的日子被隐藏了，所以我将它添加到我的代码中。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="Scripts/jquery-ui.css" type="text/css" rel="stylesheet" />
        <link href="Scripts/jquery-ui.theme.css" type="text/css" rel="stylesheet" />
        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript">


            $(function () {
                $('.date-picker').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'MM yy',
                    onClose: function (dateText, inst) {
                        var p = currentDate = $(".date-picker").datepicker("getDate");

                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year, month, 1));
                    }
                });
            });

        </script>
        <style type="text/css">
            .ui-datepicker-calendar {
                display: none;
            }
        </style>
    </head>
        <body>
            <div id="info">
                <input class="date-picker" />
            </div>
        </body>         
   </html>

【讨论】：