Convert jquery plugin into directive angular

Question

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/

Pankaj Parkar · Accepted Answer · 2015-02-20 15:04:35Z

6

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.

edited Feb 20, 2015 at 15:04

answered Feb 20, 2015 at 14:10

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pankaj Parkar Over a year ago

@sani checked and plunkr and answer too

Sadeghbayan Over a year ago

awsome , can i ask u one more thing ? how did you know that we should add this ; link: function(scope, element, attr, ngModel) { element.datepicker({ format: 'dd/mm/yyyy' });

Sadeghbayan Over a year ago

or angular.element('#datepicker1btn').datepicker('show');

Pankaj Parkar Over a year ago

because its option for datepicker that we are providing option in json like { format: 'dd/mm/yyyy' } look at this then only it will bind to that element . bootstrap-datepicker.readthedocs.org/en/release

Collectives™ on Stack Overflow

Convert jquery plugin into directive angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related