jquery datepicker错误不是函数

时间:2015-12-24 22:42:10

标签: javascript jquery model-view-controller datepicker

我的错误:

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

我在布局的head部分放置了jquery bundle引用,以确保在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>

_layout

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

2 个答案:

答案 0 :(得分:2)

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

crypto.pbkdf2

这应该是:

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

答案 1 :(得分:1)

我在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>