Menu
I'm trying to use jQuery datepicker in my AngularJS app, but I get the following error message:
jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"
I'm using the code from this answer: jQuery ui datepicker with Angularjs
Here's a working fiddle from that same answer: http://jsfiddle.net/kevinj/TAeNF/2/
This is the complete code I'm using:
<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 on earth am I doing wrong? Thank you!
940
When you load AngularJS before jQuery, that will by default use jQLite which is smaller jQuery API which is been there inside Angular itself.
Basically you need to include jQuery before angular js to use jQuery api by default while querying DOM.
Otherwise you need to explicitly use $(element)
NOTE
Make sure both the jQuery library version should be same, jQuery & jQuery.ui both.
Demo Fiddle
85
You need to add the JS files in the following order, mentioned below.
jquery.js
jquery-ui.js
moment.js
bootstrap-datetimepicker.js
app.js (Your angular module reference)
angular-bootstrap-datetimepicker-directive.js
I was facing the same issue, because I missed the bootstrap-datetimepicker.js file reference. Hope this helps all :)
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
