在angular-ui bootstrap中设置datepicker的选项

Question

我试图使用从角UI引导LIB日期选择器组件作为这里descibed:http://angular-ui.github.io/bootstrap/ 我尝试设置选项,在弹出的选择器和accoriding到我应该通过文档使用datepicker-options属性将datepicker选项作为JSON.

在我看来,我有:

        <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>

在我的控制器中,我有:

    $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'

正如您在开头看到的那样,我尝试设置选项:

 $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

然而,它似乎不起作用,datepicker不会改变.我有什么想法我做错了吗？

Answer 1

我找到了解决方案,我把选项作为属性,例如:

   <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"/>

所以我把show-button-bar作为属性,而不是作为传递给datepickerOptions的对象的一部分.

Answer 2

您正在使用基于破折号的选项名称.只有在元素上使用它们作为单个属性时,才需要这些破折号名称.即

<input type="text" datepicker-popup="{{format}}" starting-day="1" ng-model="dt" >

但是,datepicker-options期望使用camelCased格式的json中的命名选项如下:

datepicker-options="{startingDay: 1, yearFormat: 'yy'}"

<input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{startingDay: 1, yearFormat: 'yy'}" ng-model="dt" >

要么

$scope.options = {
    'startingDay': 1,
    'yearFormat': 'yy'
}

<input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{{options}}" ng-

该属性starting-day="1"也应该在datepicker输入上工作,如https://angular-ui.github.io/bootstrap/#/datepicker所述,但我似乎无法正常工作(使用版本0.12.1)

Answer 3

我知道这是一个老问题,但我想我会指出你可能遇到麻烦的地方.

在您的控制器中,您将分配$scope.dateOptions 两次,因此会覆盖您的第一个作业.

所以你最初的任务是:

$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

在最后执行此操作时会被覆盖:

$scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
};

Answer 4

根据datePicker 文档,弹出设置可以通过datepickerPopupConfig 进行全局配置,因此您必须将其添加到控制器中.

yourApp.controller('YourController', function ($scope, datepickerPopupConfig) {
  datepickerPopupConfig.showButtonBar = true;
  datepickerPopupConfig.closeText = 'I am done';
  datepickerPopupConfig.clearText = 'Wipe it out';
}

closeText由于某种原因,设置不起作用.我不知道为什么.

关于用于比赛的Plunker的例子.