Валидация в bootstrap timepicker-angular js

Question

Я использую таймер-подборку времени.

Код для времени начала

 <button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')"> 
      <i class="glyphicon glyphicon-time"></i> 
     </button> 
     <div dropdown is-open="timepickerOpened1"> 
      <span class="dropdown-menu" role="menu"> 
       <timepicker ng-model="meetingInfo.startTime" ng-change="changed()" show-meridian="true"></timepicker> 
      </span> 
     </div> 

и время окончания

 <button type="button" class="btn btn-default dropdown-toggle" ng-click="openEndTime($event, 'time')"> 
      <i class="glyphicon glyphicon-time"></i> 
     </button> 
     <div dropdown is-open="timepickerOpened2"> 
      <span class="timePickerCls dropdown-menu" role="menu"> 
       <timepicker ng-model="meetingInfo.endTime" ng-change="changed()" show-meridian="true"></timepicker> 
      </span> 
     </div> 

My Controller код ..

$scope.openStartTime = function ($event, type) { 
       $event.preventDefault(); 
       $event.stopPropagation(); 

       if (type == 'date') { 
        $scope.datepickerOpened1 = true; 
        $scope.timepickerOpened1 = false; 
       } else if (type == 'time') { 
        $scope.timepickerOpened1 = true; 
        $scope.datepickerOpened2 = false; 
       } 
      }; 
      $scope.openEndTime = function ($event, type) { 
       $event.preventDefault(); 
       $event.stopPropagation(); 

       if (type == 'date') { 
        $scope.datepickerOpened2 = true; 
        $scope.timepickerOpened2 = false; 
       } else if (type == 'time') { 
        $scope.timepickerOpened2 = true; 
        $scope.datepickerOpened2 = false; 
       } 
      }; 
      $scope.format = 'hh:mm a'; 

Мой вопрос: Как я могу добавить проверку, чтобы проверить, поступил ли время окончания всегда больше времени начала Благодаря

Answer 1

Вы можете добавить заявление, чтобы изменить функции, как

if ($scope.end <= $scope.start) { 

     $scope.end = new Date($scope.start.getTime() + $scope.mstep * 60000) 


    } 

Пожалуйста, смотрите демо ниже

?

var app = angular.module('app', ['ui.bootstrap']); 
 

 
app.controller('homeCtrl', function($scope, $log) { 
 

 
    $scope.hstep = 1; 
 
    $scope.mstep = 1; 
 

 
    $scope.start = new Date(); 
 
    $scope.end = new Date(); 
 

 
    $scope.changed = function() { 
 

 
    if ($scope.end <= $scope.start) { 
 

 
     $scope.end = new Date($scope.start.getTime() + $scope.mstep * 60000) 
 

 
    } 
 
    $log.log('Event starts at: ' + $scope.start); 
 
    $log.log('Event finish at: ' + $scope.end); 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
Start: 
 
    <timepicker ng-model="start" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> 
 
End: 
 
    <timepicker ng-model="end" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> 
 

 
    </span> 
 
    </div> 
 
</div>