Question

我正在尝试在我的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>

我到底在做什么？谢谢！

Answer 1

当您在jQuery之前加载AngularJS时，默认情况下会使用jQLite这是一个较小的jQuery API，它位于Angular内部。

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

否则您需要明确使用$(element)

注意

确保jQuery库版本应该相同，jQuery＆amp;   jQuery.ui两个。

Demo Fiddle

Answer 2

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

jquery.js
jquery-ui.js
moment.js
bootstrap-datetimepicker.js
app.js（您的角度模块参考）
angular-bootstrap-datetimepicker-directive.js

我遇到了同样的问题，因为我错过了bootstrap-datetimepicker.js文件参考。希望这对所有人有帮助：）

Answer 3

还要检查jquery-ui是否存在并在bower_components中正确指向。

使用AngularJS的jQuery datepicker：“TypeError：element.datePicker不是函数”

3 个答案: