使用自定义指令在 angular bootstrap 日期选择器上禁用周末日期

Question

我在我的 angular 应用程序中使用 Angular bootstrap 数据选择器插件。

我在我的应用程序中为日期选择器编写了自定义指令。我想在某些地方的日期选择器中禁用周末。我已经在指令本身中提供了禁用周末日期的功能。

禁用周末日期的功能在未在指令中使用时工作正常。

我的自定义指令：

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>

我不知道如何将 date-disabled="disabled(date, mode)" 传递到指令中，以便可以动态禁用周末日期。

我在指令中将 date-disabled 分配为 disable: "&dateDisabled" 并在模板中将其用作 日期禁用="disable".

非常感谢任何建议或指导。

提前致谢。

Answer 1

由于您是在自定义 datePic 指令中定义 disabled 函数，因此根本不需要将其传递给自定义指令。

您确实需要在指令中对模板进行更改。它需要引用您在自定义指令的 link 函数中定义的 disabled 函数。所以它看起来像这样：date-disabled="disabled(date, mode)".

如果您有时只想禁用周末，我会向您的自定义指令传递一个参数来控制它。

在此处 Jsfiddle 进行上述 3 处更改。

如果您特别想将自定义禁用函数传递给您的指令，这里有一个 Jsfiddle 可以做到这一点。请注意，禁用功能现在定义在控制器中的指令之外。

Answer 2

<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

enter code here

 <div ng-app="myApp" ng-controller="myCntrl">
  From Date: 
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp" 
    date-disabled="disabled(date, mode)" />


    <span>
        <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>
<script language="javascript">
    angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
    angular.module('myApp').controller('myCntrl', function ($scope) {
        $scope.today = function () {
            $scope.dt = new Date();
        };
        $scope.mindate = new Date();
        $scope.dateformat="dd/MM/yyyy";
        $scope.today();
        $scope.showcalendar = function ($event) {
            $scope.showdp = true;
        };
        $scope.showdp = false;
        $scope.disabled = function (date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));

};

    });
</script>
</form>

使用自定义指令在 angular bootstrap 日期选择器上禁用周末日期

disable weekend dates on angular bootstrap datepicker using custom directive

javascript

datepicker

angularjs

angularjs-directive

angular-strap