CODEWITHSUNDEEP
jqueryangularjsjquery-uidatepicker
Marcus Edensky
Marcus Edensky

Reputation: 944

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

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!

Upvotes: 5

Views: 11754

Answers (3)

John
John

Reputation: 323

You need to add the JS files in the following order, mentioned below.

  1. jquery.js

  2. jquery-ui.js

  3. moment.js

  4. bootstrap-datetimepicker.js

  5. app.js (Your angular module reference)

  6. angular-bootstrap-datetimepicker-directive.js

I was facing the same issue, because I missed the bootstrap-datetimepicker.js file reference. Hope this helps all :)

Upvotes: 1

Tousif Ahmed
Tousif Ahmed

Reputation: 1082

Also Check if the jquery-ui is physically present and properly pointed in bower_components.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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

Upvotes: 6

Related Questions