Question

我是Angularjs的新手。我放了2个Datepickers。我需要当我从第一个Datepicker选择日期时，应在第二个Datepicker中禁用该日期之后的较小日期。我无法为第二个Datepicker指令设置“ minDate”。

下面是我的代码：

HTML代码：

<div ng-controller='TestController'>

  <label>From Date :</label>
  <input type="text" id="1" datepicker="" ng-init="variable=''"
         ng-model="startDate" ng-change="test()" />

  <label>To Date :</label>
  <input type="text" id="2" callFuc="test()" datepicker1=""
         ng-model="endDate" />
</div>

Js代码：

app.controller('TestController', function($scope, $window) {
  $scope.test = function() {
    $scope.variable = $scope.startDate;
    $window.alert("From date is" + $scope.variable);
  };
});

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#1').datepicker({
        minDate: 0,
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#2').datepicker({
        minDate: scope.test(),
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

我可以使用minDate : "0"禁用第一个Datepicker中的过去日期。
但是我无法为第二个Datepicker正确设置minDate。我无法从“第一个Datepicker”中获取选定的日期，并将其传递给“ datepicker1”指令。任何帮助或建议，将不胜感激。

更新

我已更新代码。请检查一下。

https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview

Answer 1

datepicker指令需要监视更改并根据需要更新minDate：

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      scope.$watch(attr.minDate, function(value) {    
          el.datepicker({
            minDate: value,
            onSelect: function(dateText) {
              scope.$apply(function() {
                ngModel.$setViewValue(dateText);
              });
            }
          });
      });
    }
  };
});

用法：

  <label>To Date :</label>
  <input type="text" min-date="variable" datepicker1
         ng-model="endDate" />

如何将控制器功能变量传递给Datepicker指令？

更新

1 个答案: