All geek questions in one place

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

I am trying to use jQuery datepicker in my AngularJS application, but I am getting the following error message:

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

I use the code from this answer: jQuery ui datepicker with Angularjs

Here's a working fiddle from the same answer: http://jsfiddle.net/kevinj/TAeNF/2/

This is the complete code that I use:

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

What am I doing wrong? Thanks!

+5
source share
1 answer

When you load AngularJS before jQuery , the default will be jQLite , which is smaller than the jQuery API, which is inside Angular itself.

Basically you need to enable jQuery before Angular js in order to use the jQuery api by default when querying the DOM.

Otherwise, you need to explicitly use $(element)

Note

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

Demo script

+4
source

Source: https://habr.com/ru/post/1242129/

More articles:


All Articles