Question

我正在使用angular-UI Bootstrap datepicker。我有两个相关的日期选择器，代表开始和放大结束日期。这意味着，开始日期不允许大于结束日期，反之亦然。

由于用户可以选择一段时间内的日期，因此开始日期和结束日期的最小和最大范围会发生变化。但是现在，我并没有找到更新最小和最大日期的方法，因为它没有自动完成。谁知道怎么做？

我尝试调用更新函数来更新将在ng-change部分中调用的shipSearchStartDateOptions.maxValue或shipSearchEndDateOptions.minValue，但这根本不起作用。选项没有更改最小或最大日期。

现在，即使选项的初始设置也无效。尽管我的代码几乎与示例中所述相同。

这是初次调用时选项的控制台日志：

对象{maxDate：2016年4月4日星期一13:00:00 GMT + 0200（CEST），minDate：   2016年3月13日星期日00:00:00 GMT + 0100（CET）}

对象{maxDate：Mon Apr 04   2016年13:00:00 GMT + 0200（CEST），minDate：2016年3月13日星期三00:00:00   GMT + 0100（CET）}

JS代码：

$scope.firstAvailableDate = DataProvider.getFirstTimestamp();
$scope.lastAvailableDate = DataProvider.getLastTimestamp();
$scope.searchStartDate = $scope.firstAvailableDate;
$scope.searchEndDate = $scope.lastAvailableDate;

$scope.shipSearchStartDate = {
  opened: false
};

$scope.shipSearchEndDate = {
  opened: false
};

$scope.shipSearchStartDateOptions = {
  formatYear: 'yy',
  maxDate: $scope.searchEndDate,
  minDate: $scope.firstAvailableDate
};

$scope.shipSearchEndDateOptions = {
  formatYear: 'yy',
  maxDate: $scope.lastAvailableDate,
  minDate: $scope.searchStartDate
};

$scope.shipSearchStartOpen = function() {
  $scope.shipSearchStartDate.opened = true;
};

$scope.shipSearchEndOpen = function() {
  $scope.shipSearchEndDate.opened = true;
};

$scope.updateOptions = function () {
  $scope.shipSearchStartDateOptions.maxValue = $scope.searchEndDate;
  $scope.shipSearchEndDateOptions.minValue = $scope.searchStartDate;
};

HTML代码：

<div class="row">
   <div class="col-md-6">
     <p class="input-group">
       <input type="text" class="form-control" ng-model="searchStartDate"
           ng-change="clearShipSearch(); shipSearch(); updateOptions();" uib-datepicker-popup
           is-open="shipSearchStartDate.opened" datepicker-options="shipSearchStartOptions"
           show-button-bar="false" />
        <span class="input-group-btn">
           <button type="button" class="btn btn-default" ng-click="shipSearchStartOpen()">
             <i class="glyphicon glyphicon-calendar"></i>
           </button>
        </span>
     </p>
   </div>

   <div class="col-md-6">
     <p class="input-group">
       <input type="text" class="form-control" ng-model="searchEndDate"
          ng-change="clearShipSearch(); shipSearch(); updateOptions();" uib-datepicker-popup
          is-open="shipSearchEndDate.opened" datepicker-options="shipSearchEndOptions"
          show-button-bar="false" />
       <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="shipSearchEndOpen()">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
       </span>
     </p>
   </div>
</div>

Answer 1

正如Rob已经指出的那样，控制器和HTML中的datePicker选项对象不匹配。

此外，您不需要在ng-change上调用更新方法。 Datepicker会自动更新选项。

在更改日期后更新Angular-UI引导程序datepicker选项

1 个答案: