Question

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

  $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;
  });

这里的傻瓜： http://plnkr.co/edit/tTBcSZE08VYCpitdhCRA?p=preview

Answer 1

我已经更新了你的plunker必要的更改，基本上你没有错误地设置minDate和maxDate。你已经声明了日期选项，但你的控制器中没有这样的对象，所以我＆＃39; ve分别为日历添加了两个日期选项对象。这是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：范围datepicker不会阻止日期

1 个答案: