Question

我正在使用angular-ui bootstrap时间选择器。

开始时间代码

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

我的控制器代码..

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

在bootstrap timepicker-angular js中验证

1 个答案: