使用AngularJS的jQuery datepicker：“TypeError：element.dateP

发布时间：2020-12-17 17:39:18 所属栏目：安全来源：网络整理

导读：我正在尝试在我的AngularJS应用程序中使用jQuery datepicker,但是我收到以下错误消息： jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function" 我正在使用这个答案中的代码： jQuery ui datepicker with Angularjs 这是同一

我正在尝试在我的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时,默认情况下会使用jQLite,这是一个较小的jQuery API,它位于Angular内部.

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

否则你需要显式使用$(元素)

NOTE

Make sure both the jQuery library version should be same,jQuery &
jQuery.ui both.

Demo Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!