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!
