驗證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無效）。