Question

您好我有两个Angular UI Bootstrap Datepickers，它们将文本输入中的日期设置为dateFrom和dateTo值。

我想在用户选择错误的日期范围时阻止用户采取行动。

例如。当用户将dateFrom设置为2017-06-12时，他应该无法在dateTo datePicker上将dateTo设置为小于2017-06-12。

不良范围例如2017-06-12至2017-06-09。我怎么能阻止用户aganinst这个动作？我试图在第二个datepicker弹出窗口中的选择日期之后在一个日期选择器弹出窗口中设置范围，但我不知道如何解决它。

下面我展示了我的html和angular js代码：

HTML：

<div class="row">
        <div class="col-md-3 form-group">

            <label for="usr"  class="control-label">Date From:</label>
            <div class="input-group">
                <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="datepickers.dt" datepicker-options="dateOptionsDt" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>

        </div>
        <div class="form-group col-md-3">

            <label for="usr" class="control-label">Date To:</label>
            <div class="input-group">
                <input type="text" class="form-control" uib-datepicker-popup ng-model="dtSecond" is-open="datepickers.dtSecond" datepicker-options="dateOptionsDtSecond" ng-required="true" close-text="Close" readonly />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>


            </div>

        </div>
        <div class="form-group">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button" ng-click="searchByDates()" style="margin-top: 24px;">Search</button>
            </span>

        </div>
    </div>

Angular js：

var app = angular.module('app', ['ui.bootstrap','ngSanitize','ngAnimate']);
app.controller('postsController', function($scope) {


    $scope.initDate = function(){


      $scope.dateFrom = null;

      $scope.dateTo = null;

    }
    $scope.today = function(){


       $scope.dateFrom = new Date();

      $scope.dateTo = new Data();
    };

    $scope.datepickers = {
        dt: false,   // date From
        dtSecond: false // date To
      }
    $scope.today = function(){

        $scope.dateFrom = new Date();
        $scope.dateTo = new Date();
    };

  $scope.initDate();
  //$scope.today();


  $scope.dateOptionsDt = {

    formatYear: 'yyyy',
    maxDate: new Date(2017,05,22), 
    minDate: new Date(2017,05,22),
    startingDay: 1
  };
   $scope.dateOptionsDtSecond = {

    formatYear: 'yyyy',
    maxDate: new Date(2017,05,16), 
    minDate: new Date(2017,05,13),
    startingDay: 1
  };


  $scope.open = function($event,which) {

      $event.preventDefault();
      $event.stopPropagation();
      $scope.correctRange(which);
      $scope.datepickers[which] = true;

  }

  $scope.popup1 = {
    opened: false
  };

  $scope.popup2 = {
    opened: false
  };

  $scope.correctRange = function(which){

      var dateFrom = $scope.dateFrom;
      var dateTo = $scope.dateTo;

      if(which == 'dt'){

          if(dateTo != null){

              $scope.dateOptionsDtSecond.maxDate = new Date(2017,05,30);


          }
          //$scope.dateOptions.maxDate = new Date();

      }
      else if(which=='dtSecond'){


      }

  }

});

以下是工作代码的示例：
plnkr.co/edit/HE4qatujlWVxf9kzPqM6?p=preview

Angular UI bootstrap datepicker正确范围dateFrom，dateTo

0 个答案: