disable weekend dates on angular bootstrap datepicker using custom directive

Question

I'm using Angular bootstrap datapicker plugin in my angular app.

I've written a custom directive for the date pickers in my app. And i want to disable the weekends in the date picker at certain places. I've given the functions that disables the weekend dates inside the directive itself.

The function to disable the weekend dates works fine when it is not used inside the directive.

My custom directive:

app.directive('datePic', function(){
      return {
        restrict: 'E',
        scope: {
          control: "=ngModel",
          min: "=minDate",
          max: "=maxDate",
          disable: "&dateDisabled"
        },
        template: '<div class="col-sm-6"><div class="input-group"><input type="text" class="form-control" datepicker-popup is-open="opened1" ng-model="control" min-date="min" max-date="max" date-disabled="disable" close-text="Close" /><span class="input-group-btn"><button type="button" id="btn2" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span></div></div>',
        link: function(scope, elem, attrs){
          scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            scope.opened1 = true;
          };

          scope.disabled = function(date, mode) {
            return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
          };

          scope.toggleMin = function() {
            scope.minDate = scope.minDate ? null : new Date();
          };
           scope.toggleMin();
        }
      }
    })

HTML:

<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>From :</label>
<date-pic ng-model="data.leaveFromDate" min-date="minDate" max-date="maxdate" date-disabled="disabled(date, mode)"></date-pic>
</div>

<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>To :</label>
<date-pic ng-model="data.leaveToDate" min-date="data.leaveFromDate" max-date="data.leaveToDate" date-disabled="disabled(date, mode)"></date-pic>
</div>

I dont know how to pass date-disabled="disabled(date, mode)" into the directive so that it is possible to disable weekend dates dynamically.

I have assigned date-disabled inside the directive as disable: "&dateDisabled" and used it in the template as date-disabled="disable".

Any suggestions or guidance much appreciated.

Thank you in advance.

Answer 1

Since you are defining your disabled function within your custom datePic directive, there is no need to pass it in to your custom directive at all.

You do need to make a change to the template within your directive. It needs to reference the disabled function that you have defined in the link function of your custom directive. So it would look like this: date-disabled="disabled(date, mode)".

If you want to only disable weekends sometimes, I would pass in a parameter to your custom directive to control this.

Working Jsfiddle here with the 3 changes above.

If you specifically want to pass in a custom disabled function to your directive, here is a Jsfiddle that does that. Note that the disabled function is now defined outside the directive in a controller.