禁止使用自定义指令的角度引导日期选择周末日期 [英] disable weekend dates on angular bootstrap datepicker using custom directive

问题描述

我用我的角度应用角度引导datapicker插件。

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.

我的自定义指令：

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.

我已经指定的日期残疾人指令内为停用：＆放大器; dateDisabled并用它在模板的日期禁用=禁用

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

任何建议或指导，多AP preciated。

Any suggestions or guidance much appreciated.

感谢您提前。

推荐答案

由于您的自定义中定义的禁用函数 datePic 指令，也没有必要在将它传递给您的自定义指令在所有。

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.

的jsfiddle 这里与上面的3变化。

Working Jsfiddle here with the 3 changes above.

如果你特别希望在自定义功能禁用你的指令传递，这里是一个的jsfiddle 即做到这一点。请注意，禁用功能指令外控制器现在被定义。

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.

这篇关于禁止使用自定义指令的角度引导日期选择周末日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！