jQuery ui datepicker with Angularjs

Question

I want to use jQuery UI datepicker with AngularJS.

I have a sample , but my code is not working.

Sample:

http://www.abequar.net/jquery-ui-datepicker-with-angularjs/

My Code:

<input id="sDate" name="programStartDate" type="text" datepicker required/>    angular.module('elnApp')  .directive('datepicker', function () {   return {     restrict: 'A',     require : 'ngModel',     link : function (scope, element, attrs, ngModelCtrl) {         $(function(){             element.datepicker({                 dateFormat:'yy-mm-dd',                 onSelect:function (date) {                     ngModelCtrl.$setViewValue(date);                     scope.$apply();                  }             });         });     } } }); 

It shows an error TypeError: Object [object Object] has no method 'datepicker'.

Answer 1

I have almost exactly the same code as you and mine works.

Do you have jQueryUI.js included in the page?

There's a fiddle here

<input type="text" ng-model="date" jqdatepicker /> <br/> {{ date }}   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();                 }             });         }     }; }); 

You'll also need the ng-app="app" somewhere in your HTML