anglejsでjquery dateピッカーを追加します

Question

anglejsにjquery dateピッカーを表示しようとしていますが、エラーがelement.datepicker is not a functionとして表示されています。

<form ng-app="myApp" ng-controller="myCtrl"> 
     <div> 
      <label>Date<span class="requiredField">*</span></label> 
      <input type="text" id="levFrom" datepicker ng-model="leave.from_date" required> 
     </div> 
</form> 
<script> 
    var app = angular 
        .module("myApp", []) 
        .directive("datepicker", function() { 

         function link(scope, element, attrs) { 
          element.datepicker({ 
           dateFormat: "dd/mm/yy" 
          }); 
         } 
         return { 
          require: 'ngModel', 
          link: link 
         }; 
        }) 
        .controller("myCtrl", function ($scope, $http, $timeout) { 
        }) 
</script> 

私のコードでは何が間違っていますか？

plunker：https://plnkr.co/edit/n0sb4CVoSqb0TfRblOLX?p=preview

Answer 1

//Try this one directive 
app.directive("datepicker", function() { 
return { 
restrict: "A", 
require: "ngModel", 
link: function (scope, elem, attrs, ngModelCtrl) { 
    var updateModel = function (dateText) { 
    scope.$apply(function() { 
     ngModelCtrl.$setViewValue(dateText); 
    }); 
    }; 
    var options = { 
    dateFormat: "dd/mm/yy", 
    onSelect: function (dateText) { 
     updateModel(dateText); 
    } 
    }; 
    elem.datepicker(options); 
    } 
} 
});