在日期更改后更新Angular UI引导程序日期选择器选项
update Angular-UI bootstrap datepicker options after date change
我正在使用角度UI引导日期选择器。我有两个依赖的日期选择器,它们代表start&结束日期。这意味着,开始日期不允许大于结束日期,反之亦然。
由于用户可以在一段时间内选择日期,因此开始日期和结束日期的最小值和最大值范围会发生变化。然而,现在,我并没有真正找到更新最小和最大日期的方法,因为它不是自动完成的。有人知道怎么做吗?
我尝试调用一个更新函数来更新将在ng更改部分中调用的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: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
他们需要匹配。
此外,您不需要在ng更改时调用update方法。日期选择器将自动更新选项。
相关文章:
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- angular ui boostrap日期选择器显示年份第一
- Jquery UI日期选择器没有'单击链接时不会再次显示
- 从Function触发JQuery UI日期选择器,并将日期存储到变量中
- jQuery UI DatePicker-禁用除每月第一天和第15天以外的所有日期
- Onsen UI在点击时显示一个日期选择器
- 将 jQuery UI 日期选择器与异步 AJAX 请求一起使用
- 如何在 Angular UI 日期选择器中格式化行和月份名称
- 如何在 jQuery 日期选择器 UI 中阻止多个日期范围
- 为什么引导 UI 在加载时不显示正确的日期格式
- 在JQuery UI日期选择器中禁用当前日期之前的日期
- Javascript日期-指定传入日期格式(jQuery UI DateTimepicker)
- 正在禁用jQuery UI日期选取器日期
- 正在将Jquery UI日期选择器链接到DropDownlist
- 从日期选择器中获取默认格式的日期,并在jquery UI中转换为其他格式
- 如何启用由日期选择器 ui 附加的输入?(JQuery 插件)