在日期更改后更新Angular UI引导程序日期选择器选项

update Angular-UI bootstrap datepicker options after date change

本文关键字:日期 UI 引导程序 选项 Angular 选择器 更新      更新时间:2023-09-26

我正在使用角度UI引导日期选择器。我有两个依赖的日期选择器,它们代表start&结束日期。这意味着,开始日期不允许大于结束日期,反之亦然。

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

我尝试调用一个更新函数来更新将在ng更改部分中调用的shipSearchStartDateOptions.maxValueshipSearchEndDateOptions.minValue,但根本不起作用。选项没有更改最短或最长日期。

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

这是首次调用时选项的控制台日志:

对象{maxDate:2016年4月4日星期一13:00:00 GMT+0200(CEST),minDate:2016年3月13日星期日00:00:00 GMT+0100(CET)}

对象{maxDate:2004年4月1日2016年13:00:00 GMT+0200(CEST),min日期:2016年3月13日星期日00:00:00GMT+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>

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

shipSearchStartOptions
shipSearchEndOptions

但是你的控制器对象是:

shipSearchStartDateOptions
shipSearchEndDateOptions

他们需要匹配。

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

此外,您不需要在ng更改时调用update方法。日期选择器将自动更新选项。