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

두 번째 datepicker의 ng-change 메소드에 startDate 및 endDate 변수를 전달할 필요가 없습니다. $scope에서 해당 변수를 이미 추적하고 있습니다 (ng-model).

$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 옵션을 수정하여 위의 두 가지 오류를 방지 할 수 있습니다. 을 this plunker에서 확인하십시오. 새로운 시작일을 선택할 때마다 종료일에 대한 minDate 옵션을 수정하고 사용자 입력 문제를 방지 할 수 있습니다. (요청에 따라)

---

업데이트

plunker은 $ 범위 변수로 바인딩 자신의 사용자 정의 datepicker-options이 모두 두 개의 datepickers를 보여줍니다 - 우리는 변경하려면 다음 datepicker-options을 수정할 수 있습니다 각각의 동작은 datepicker입니다.

startDateOptions 오늘 (CTRL 내에서) "minDate"를 기본값으로 설정하면 오늘 전에 startDate을 선택하지 못하게됩니다 (방지하려고했던 첫 번째 문제 해결).

에 $watch을 삽입하면 startDate이 변경된 후에 endDateOptions을 업데이트 할 수 있습니다. 이렇게하면 입력에 대한 사용자 선택을 으로 설정하여 startDate이 무엇이든간에 (startDate 앞에 endDate을 선택하는 두 번째 문제를 해결 함) 입력을 제한 할 수 있습니다.

또한 말이 곳 (우리가 먼저 올바른 endDate을 선택하지만, 그 endDate 유효하게하는 새로운 startDate을 선택한 경우 등) endDate를 조정 $ 시계에 약간의 논리가있다.