Question

我在我的角应用程序中使用Angular bootstrap datapicker插件。

我已在我的应用中为日期选择器编写了自定义指令。我想在某些地方禁用日期选择器中的周末。我已经给出了禁用指令本身内周末日期的函数。

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

我的自定义指令：

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 =＆＃34;禁用（日期，模式）＆＃34; 传递到指令中，以便可以动态地禁用周末日期。

我已在指令中指定禁用日期 禁用：＆＃34;＆amp; dateDisabled＆＃34; ，并在模板中将其用作日期-disabled =＆＃34;禁用＆＃34;

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

提前谢谢。

Answer 1

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

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

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

使用上述3项更改在此处Jsfiddle。

如果您特别想要将自定义禁用功能传递给您的指令，这里有一个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 datepicker上的周末日期

2 个答案: