在 angular-ui bootstrap 中设置日期选择器的选项 [英] Setting options to datepicker in angular-ui bootstrap
问题描述
我正在尝试使用 angular-ui bootstrap lib 中的 datepicker 组件,如下所述:http://angular-ui.github.io/bootstrap/我尝试为弹出选择器设置选项,并根据文档我应该使用 datepicker-options 属性将 datepicker 的选项作为 JSON 传递.
在我看来,我有:
<div class="col-md-6"><p class="输入组"><input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/><span class="input-group-btn"><button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span></p>
在我的控制器中,我有:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};$scope.today = function() {$scope.dt = new Date();};$scope.today();$scope.showWeeks = false;$scope.clear = function () {$scope.dt = null;};$scope.toggleMin = function() {$scope.minDate = ( $scope.minDate ) ?空:新日期();};$scope.toggleMin();$scope.open = function($event) {$event.preventDefault();$event.stopPropagation();$scope.opened = true;};$scope.dateOptions = {'年份格式': "'yy'",起始日":1};$scope.format = 'dd/MM/yyyy'
正如您在开头所看到的,我尝试设置选项:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
然而,它似乎不起作用,日期选择器没有改变.知道我做错了什么吗?
我找到了解决方案,我把选项作为属性,例如:
所以我把 show-button-bar 作为属性而不是作为传递给 datepickerOptions 的对象的一部分.
I'm trying to use datepicker component from angular-ui bootstrap lib as descibed here: http://angular-ui.github.io/bootstrap/ And I try to set options for the popup picker and accoriding to the documentation I should pass options for datepicker as JSON using the datepicker-options attribute.
In my view I have:
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
And in my controller I have:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = false;
$scope.clear = function () {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.format = 'dd/MM/yyyy'
As you can see at the beginning I try to set the options:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
however, it doesn't seem to work, the datepicker does not change. Any ideas what I'm doing wrong?
I found the solution to this, I put the options as attributes, e.g.:
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2014-12-31'" datepickerOptions="dateOptions" ng-required="true" show-button-bar="false"/>
so I put show-button-bar as the attribute and not as a part of object passed to datepickerOptions.
这篇关于在 angular-ui bootstrap 中设置日期选择器的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!