use third party lib in angular directive

Question

i want create an angular directive for persian datepicker, javascript lib that i want to use is http://jspersiandatepicker.codeplex.com/, and my code is :

<input type="text" persiandatepicker ng-model="mydate" />{{mydate}}

directive('persiandatepicker', function() {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function (scope, element, attrs, ngModel) {
          if (!ngModel) return;

          ngModel.$render = function () {
              element.bind("click", function () {
              PersianDatePicker.Show(this, ngModel.$viewValue || '');
          });

      };
   }
};
});

this code show datepicker when click on input and when select date show in input, but model not bind and not change how can i do binding in this sample?? this link in plunker is my code : http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview

Answer 1

You need to let angular know that the value has changed. It looks like the datepicker calls _textBox.onchange(); when it is finished updating the textbox so you can hook into that event. You will need to wrap your code in

 element.bind("onchange", function () {
     scope.$apply(function() {
         //Code to update model goes here.
         //Basically you will need to copy the textbox's contents to the model,
         // you may wish to convert to a date object as well
     }
 }

The angularui datepicker source code is only 120 lines long and could be a great resource if you are looking for an example on creating a datepicker directive.

Answer 2

Currently there is a good one Available. it's a Persian angularjs calendar: Amin Rahimi's angularjs Datepicker .