更改日期后更新Angular-UI引導日期選擇器選項

Question

我正在使用angular-UI引導日期選擇器。 我有兩個從屬的日期選擇器，分別代表開始和結束日期。 因此，不允許開始日期大於結束日期，反之亦然。

由於用戶可以選擇一段時間內的日期，因此開始日期和結束日期的最小和最大范圍會發生變化。 但是現在，我還沒有真正找到更新最小和最大日期的方法，因為它不是自動完成的。 有人知道該怎么做嗎？

我嘗試調用一個更新函數，該函數更新ng-change部分中將調用的shipSearchStartDateOptions.maxValue或shipSearchEndDateOptions.minValue ，但是這根本沒有用。 這些選項沒有更改最小或最大日期。

現在，即使選項的初始設置也不起作用。 即使我具有與示例中所述幾乎相同的代碼。

這是初始調用時選項的控制台日志：

對象{最大日期：2016年4月4日星期一13：00：00 GMT + 0200（CEST），最小日期：2016年3月13日，星期日00:00:00 GMT + 0100（CET）}

對象{最大日期：2016年4月4日星期一13：00：00 GMT + 0200（CEST），最小日期：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

您將標記中的datepicker選項綁定到：

shipSearchStartOptions
shipSearchEndOptions

但是您的控制器對象是：

shipSearchStartDateOptions
shipSearchEndDateOptions

他們需要匹配。

Answer 2

正如Rob所指出的，控制器和HTML中的datePicker選項對象不匹配。

另外，您無需在ng-change上調用update方法。 Datepicker將自動更新選項。