title: Validate start date and end date on AngularJS Bootstrap date picker?
body: <p>I am new to Angular JS and I am trying to implement validation for date time picker in my Angular project.</p>
  
  <p>I am using bootstrap date picker.</p>
  
  <p>My HTML is :</p>
  
  <pre><code>&lt;div&gt;
      &lt;form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal"&gt;
          &lt;fieldset&gt;
      &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="reservation.reservedFrom"&gt;Reserved From&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
      &lt;div class="controls input-group date" data-provide="datepicker"&gt;
          &lt;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"/&gt;
          &lt;div class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- /controls --&gt;
  &lt;/div&gt; &lt;!-- /control-group --&gt;
  &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="reservation.reservedTill"&gt;Reserved Till&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
      &lt;div class="controls input-group date" data-provide="datepicker"&gt;
          &lt;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)'/&gt;
          &lt;div class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;span&gt;{{errMessage}}&lt;/span&gt;
  
      &lt;/div&gt; &lt;!-- /controls --&gt;
  &lt;/div&gt; &lt;!-- /control-group --&gt;
   &lt;/fieldset&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My Controller is :</p>
  
  <pre><code>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) &gt; new Date(endDate)) {
                  $scope.errMessage = 'End Date should be greater than start date';
                  return false;
              }
              if (new Date(startDate) &lt; curDate) {
                  $scope.errMessage = 'Start date should not be before today.';
                  return false;
              }
          };
  
          $scope.cancel = function () {
              $location.path("/reservations");
          }
      }]);
  </code></pre>
  
  <p>I am totally new to Angular and I'm trying to understand it by doing projects. Can anyone have a check and provide a solution?</p>