日期更改后更新 Angular-UI bootstrap 日期选择器选项

Question

我正在使用 angular-UI Bootstrap 日期选择器。我有两个相关的日期选择器，它们代表开始和结束日期。也就是说，开始日期不能大于结束日期，反之亦然。

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

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

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

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

Object {maxDate: Mon Apr 04 2016 13:00:00 GMT+0200 (CEST), minDate: Sun Mar 13 2016 00:00:00 GMT+0100 (CET)}

Object {maxDate: Mon Apr 04 2016 13:00:00 GMT+0200 (CEST), minDate: Sun Mar 13 2016 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

您将标记中的日期选择器选项绑定到：

shipSearchStartOptions
shipSearchEndOptions

但您的控制器对象是：

shipSearchStartDateOptions
shipSearchEndDateOptions

他们需要匹配。

Answer 2

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

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

日期更改后更新 Angular-UI bootstrap 日期选择器选项

update Angular-UI bootstrap datepicker options after date change

javascript

jquery

datepicker

angularjs

angular-ui-bootstrap