Convert jquery plugin into directive angular

angularjs, angularjs-directive, datepicker, javascript, jquery

Solution

Basically you written `ng-mode` instead of `ng-model` and directive you should define date-picker options not the `scope.$eval(attr.dateP)` which is totally wrong. Inside datepicker you need to provide their options in `json` format like here we mentioned option as `{ format: 'dd/mm/yyyy' })`

HTML

<input date-p id="datepicker1" class="input-small" type="text" ng-model="dt">

Directive

app.directive('dateP', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.datepicker({
        format: 'dd/mm/yyyy'
      });
    }
  }
});

Update

For show `datepicker` on button click you need to do add below method inside your controller.

Controller

$scope.showDatepicker =  function(){
  angular.element('#datepicker1btn').datepicker('show');
};

Working Plunkr

Thanks.

Problem

I'm trying to convert jQuery plugin into directive. Here is the library: Github. In the documentation there is an option : ``` $(document).ready(function() { $("#datepicker").datepicker(); $("#datepickerbtn").click(function(event) { event.preventDefault(); $("#datepicker").focus(); }) }); ``` Directive I've created : ``` app.directive('dateP', function(){ return{ restrict:'A', require:'ngModel', link:function(scope, element, attr, ngModel){ $(element).datepicker(scope.$eval(attr.dateP)); console.log('hey'); ngModel.$setViewValue(scope); } } }); ``` but it's not working , any help would be appreciate it . Plunker . I've read this : https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Original source