Validation in bootstrap timepicker-angular js

Question

I'm using angular-ui bootstrap time picker.

Code for start time

        <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>

and end time

        <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 Code..

$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';

My Question :How can I add validation to check whether the End Time entered is always greater than the Start Time?Thanks

sylwester · Accepted Answer · 2014-12-22 12:49:36Z

You can add statement to change function like

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

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


    }

Please see demo below

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>

Collectives™ on Stack Overflow

Validation in bootstrap timepicker-angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related