验证AngularJS Bootstrap日期选择器的开始日期和结束日期？

Question

我是Angular JS的新手，我尝试在我的Angular项目中实现日期时间选择器的验证。

我正在使用引导日期选择器。

我的HTML是：

<div> 
    <form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal"> 
     <fieldset> 
    <div class="control-group"> 
    <label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label> 
    <div class="controls input-group date" data-provide="datepicker"> 
     <input type="text" class="span4" style="width:150px" name="reservedFrom" placeholder="Reserved From" data-ng-model="reservation.reservedFrom" 
       validator="required" required-error-message="Date is required" valid-method="watch" id="startDate"/> 
     <div class="input-group-addon"> 
      <span class="glyphicon glyphicon-th"></span> 
     </div> 

    </div> <!-- /controls --> 
</div> <!-- /control-group --> 
<div class="control-group"> 
    <label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label> 
    <div class="controls input-group date" data-provide="datepicker"> 
     <input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill" 
       validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr(startDate,endDate)'/> 
     <div class="input-group-addon"> 
      <span class="glyphicon glyphicon-th"></span> 
     </div> 
     <span>{{errMessage}}</span> 

    </div> <!-- /controls --> 
</div> <!-- /control-group --> 
</fieldset> 
    </form> 
    </div> 

我的控制器是：

myApp.controller('editReservationController', ['$scope', '$filter', 'reservationResolved', 'pocResolved', 'accountResolved', 'reservationServices', '$location', '$state', 
    function ($scope, $filter, reservationResolved, pocResolved, accountResolved, reservationServices, $location, $state) { 
     $scope.reservation = new Object(); 
     $scope.accounts = accountResolved.data; 
     $scope.pocs = pocResolved.data; 
     $scope.reservation.employee = reservationResolved.data; 
     $scope.updateReservation = function() { 
      if ($scope.editReservationForm.$valid) { 
       reservationServices.updateReservation($scope.reservation).then(function (result) { 
        $scope.data = result.data; 
        if (!result.data.error) { 
         $state.transitionTo('employeeTalentPool', { 
          id: $state.params.id 
         }); 
        } 
       }); 
      } 
     }; 

     $scope.checkErr = function (startDate, endDate) { 
      $scope.errMessage = ''; 
      var curDate = new Date(); 

      if (new Date(startDate) > new Date(endDate)) { 
       $scope.errMessage = 'End Date should be greater than start date'; 
       return false; 
      } 
      if (new Date(startDate) < curDate) { 
       $scope.errMessage = 'Start date should not be before today.'; 
       return false; 
      } 
     }; 

     $scope.cancel = function() { 
      $location.path("/reservations"); 
     } 
    }]); 

我完全陌生的角度，我想通过做项目去了解它。任何人都可以检查并提供解决方案吗？

Answer 1

没有必要在第二个日期选择器中将startDate和endDate变量传递给ng-change方法;您已使用ng-model跟踪$scope上的这些变量。

$scope.checkErr = function() { 
    var start = new Date($scope.reservation.reservedFrom), 
     end = new Date($scope.reservation.reservedTill); 

    if (end < start) { 
    $scope.errorMsg = "End must be after start"; 
    } 

    ... other logic ... 
}; 

---

此外，它可能是最好还是避免用户做出错误的选择。

您似乎需要防范的两个错误是：1）用户在今天之前选择startDate，并且2）用户在startDate之前选择endDate。

通过修改datepicker-options中的minDate选项，可以防止上述两种错误。查看$watchthis plunker - 每次我们选择一个新的开始日期时，我们都可以修改minDate选项的结束日期并防止用户输入问题。 （每个请求）

---

更新

的plunker显示两个datepickers，这两者有自己的定制datepicker-options绑定为$范围内的变量 - 我们将能够修改这些datepicker-options改变每个datepicker的行为。

默认startDateOptions“minDate”到今天（在CTRL内）使用户在今天之前不可能选择startDate（解决您试图阻止的第一个问题）。

将$watch放置在startDate上允许我们在更改startDate后更新endDateOptions。这允许我们通过将minDate设置为startDate（解决在startDate之前选择endDate的第二个问题）来限制用户对endDate输入的选择。

还有在$手表一些逻辑来调整endDate在有意义的（例如，如果我们首先选择了一个有效endDate，但后来选择了新的startDate这将使该endDate无效）。