【问题标题】:jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"带有 AngularJS 的 jQuery 日期选择器:“TypeError:element.datePicker 不是函数”
【发布时间】:2016-05-11 18:39:45
【问题描述】:

我正在尝试在我的 AngularJS 应用程序中使用 jQuery datepicker,但我收到以下错误消息:

jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"

我正在使用此答案中的代码: jQuery ui datepicker with Angularjs

这是来自相同答案的有效小提琴: http://jsfiddle.net/kevinj/TAeNF/2/

这是我正在使用的完整代码:

<html>
<head>
    <script src="/js/angular.min.js"></script>
    <script src="/lib/jquery/jquery-1.12.0.min.js"></script>
    <script src="/lib/jquery/jquery-ui-1.11.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/lib/jquery/jquery-ui-1.11.4.min.css">
</head>

<body ng-app="app">

<script>
var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datePicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});
</script>

<p><input type="text" ng-model="date" jqdatepicker></p>
<p>{{ date }}</p>

</body>
</html>

我到底做错了什么?谢谢!

【问题讨论】:

    标签: jquery angularjs jquery-ui datepicker


    【解决方案1】:

    当您在 jQuery 之前加载 AngularJS 时,默认情况下将使用 jQLite,这是较小的 jQuery API,它存在于 Angular 本身中。

    基本上你需要在angular js之前包含jQuery,以便在查询DOM时默认使用jQuery api。

    否则需要显式使用$(element)

    注意

    确保两个 jQuery 库版本应该相同,jQuery & jQuery.ui 两者都有。

    Demo Fiddle

    【讨论】:

    【解决方案2】:

    您需要按以下顺序添加JS文件,如下所述。

    1. jquery.js

    2. jquery-ui.js

    3. moment.js

    4. bootstrap-datetimepicker.js

    5. app.js(你的角度模块参考)

    6. angular-bootstrap-datetimepicker-directive.js

    我遇到了同样的问题,因为我错过了 bootstrap-datetimepicker.js 文件引用。希望这对所有人都有帮助:)

    【讨论】:

      【解决方案3】:

      同时检查 jquery-ui 是否物理存在并正确指向 bower_components。

      【讨论】:

        猜你喜欢
        • 2013-08-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-02-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-11-17
        相关资源
        最近更新 更多