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

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"> 

我在这里创建了一个 plunker - 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;

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