javascript - 使用 ui-bootstrap 版本 1.3.3 时，无法在 Angular ui-bootstrap datepicker 中添加最小日期和最大日期验证

Question

我正在尝试在我的日期选择器中添加验证，以便用户无法选择当前日期之前 30 天的任何日期，也无法选择 future 30 天的任何日期，我正在使用以下日期选择器代码 -

<div class="form-group" ng-class="{ 'has-error' : memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted) }">
  <label for="Date of Birth" class="" ng-hide="memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted)">Date of Birth(dd/mm/yyyy)*</label>
  <label class="error_message_text" ng-show="memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted)"> Date of birth is required </label>
  <p class="input-group" style="width:270px;">
    <input type="text" class="form-control" name="dateOfBirth" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </p>
</div>

我正在使用以下脚本 -

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>  
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

我在这里创建了一个笨蛋 - https://plnkr.co/edit/RmDyhjKpEJvTMjNRp5LE?p=preview

谁能告诉我如何在我的代码中实现此验证？

Answer 1

问题就在这里:

$scope.minDate = date.setDate((new Date()).getDate() - 30);

当您调用 date.setDate(..) 时，它不会返回日期对象，因此请执行此操作

$scope.toggleMin = function() {
    var date = new Date();
    date.setDate((new Date()).getDate() - 30);
    $scope.minDate = date;
  };
  $scope.toggleMin();


var date1 = new Date();
date1.setDate((new Date()).getDate() + 30);
$scope.dateOptions.maxDate = date1;

小修正-(在分配最小日期和最大日期时添加了.dateOptions)

 $scope.toggleMin = function() {
        var date = new Date();
        date.setDate((new Date()).getDate() - 30);
        $scope.minDate = date;
      };
      $scope.toggleMin();

    //  Add this for maxDate, no code was there in plunker
    var date1 = new Date();
    date1.setDate((new Date()).getDate() + 30);
    $scope.dateOptions.maxDate = date1;

回答笨蛋- https://plnkr.co/edit/RmDyhjKpEJvTMjNRp5LE?p=preview