angular.module('myApp.directives', [])
  .directive('datepicker', function() {
    return {
      // Wymuszenie na frameworku AngularJS, aby domyślnie dyrektywy
      // były ograniczone jedynie do atrybutów.
      restrict: 'A',
      // Zawsze należy używać wraz z  ng-model.
      require: '?ngModel',
      // Ta metoda musi być zdefiniowana i przekazana
      // dyrektywie z poziomu kontrolera widoku.
      scope: {
        select: '&'        // Dołączenie funkcji select do właściwego zasięgu.
      },
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return;

        var optionsObj = {};

        optionsObj.dateFormat = 'mm/dd/yy';
        var updateModel = function(dateTxt) {
          scope.$apply(function () {
            // Wywołanie wewnętrznej metody pomocniczej AngularJS
            // w celu uaktualnienia wiązania dwukierunkowego.
            ngModel.$setViewValue(dateTxt);
          });
        };

        optionsObj.onSelect = function(dateTxt, picker) {
          updateModel(dateTxt);
          if (scope.select) {
            scope.$apply(function() {
              scope.select({date: dateTxt});
            });
          }
        };

        ngModel.$render = function() {
          // Użycie wewnętrznej zmiennej AngularJS charakterystycznej dla wiązania.
          element.datepicker('setDate', ngModel.$viewValue || '');
        };
        element.datepicker(optionsObj);
      }
    };
  });
