AngularUI：范围日期选择器不阻止日期

Question

有人可以帮忙吗？
我想在我的开始日期选择器中阻止日期在结束日期之后，并在结束日期选择器中阻止日期在开始日期之前。我使用了 angularui 日期选择器。
我尝试使用此代码执行此操作：

  $scope.start = new Date();
  $scope.end = new Date($scope.start.getTime() + 7 * 24 * 60 * 60 * 1000);

  $scope.minStartDate = 0; //fixed date
  $scope.maxStartDate = $scope.end; //init value
  $scope.minEndDate = $scope.start; //init value
  $scope.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value

  $scope.$watch('start', function(v){
    $scope.minEndDate = v;
  });
  $scope.$watch('end', function(v){
    $scope.maxStartDate = v;
  });

下面是 plunker： http://plnkr.co/edit/tTBcSZE08VYCpitdhCRA?p=preview

Answer 1

我已经用必要的更改更新了你的 plunker，基本上你设置了 minDate 和 maxDate incorrectly.You 已经声明了日期选项但是你的控制器中没有这样的对象，所以我分别为日历添加了两个日期选项对象。这是 working 代码。

你的JS变化如下

    $scope.datePicker ={};
    $scope.start = new Date();
    $scope.end = new Date($scope.start.getTime() + 7 * 24 * 60 * 60 * 1000);

    $scope.datePicker.minStartDate = 0; //fixed date
    $scope.datePicker.maxStartDate = $scope.end; //init value
    $scope.datePicker.minEndDate = $scope.start; //init value
    $scope.datePicker.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value

$scope.$watch('start', function(v) {
            $scope.datePicker.minEndDate = v;
            $scope.dateOptions2.minDate = v; //chabge the same in date options object to reflect in UI
        });
        $scope.$watch('end', function(v) {
            $scope.datePicker.maxStartDate = v;
            $scope.dateOptions1.maxDate = v;
        });
    //create two separate objects for date options where you can set ,in and max date..
        $scope.dateOptions1 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            maxDate: $scope.datePicker.maxStartDate,
            minDate: $scope.datePicker.minStartDate,
            startingDay: 1
        };
         $scope.dateOptions2 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            maxDate: $scope.datePicker.maxEndDate,
            minDate: $scope.datePicker.minEndDate,
            startingDay: 1
        };

您的 HTML 变化如下

<div ng-controller="DatepickerPopupDemoCtrl">
        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="start" 
                  is-open="popup1.opened" 

                  datepicker-options="dateOptions1" 
                  close-text="Close" 
                  alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

        <hr>

        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="end" 
                  is-open="popup2.opened" 

                  datepicker-options="dateOptions2" 
                  close-text="Close" 
                  alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

  </div>

AngularUI：范围日期选择器不阻止日期

AngularUI: range datepicker don't block dates

angularjs

angular-ui-bootstrap