Question

我尝试使用angular-ui bootstrap lib中的datepicker组件，如下所示：http://angular-ui.github.io/bootstrap/ 我尝试为弹出选择器设置选项，并根据文档，我应该使用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'};

然而，它似乎不起作用，日期选择器不会改变。我有什么想法我做错了吗？

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期望json中的命名选项具有 camelCased 格式，如下所示：

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 documentation，可以通过datepickerPopupConfig全局配置弹出设置，因此您必须将其添加到控制器中。

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

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

Plunker播放的示例。

Answer 5

datepicker-options在版本0.11中引入，因此请确保使用的是angular-ui-bootstrap版本0.11或更高版本

Answer 6

您的$scope.dateOptions = { 'showButtonBar': 'false', 'closeText':'SomeText' };对象键看起来不是 camelCased 。试试这个：

show-button-bar

Html属性应为破折号，例如close-text或datepicker-options等。

请注意datepickerOptions html属性与// get the value if the key exists, set a default value otherwise let aValue = aMap.get(aKey) if(aValue == null) { aMap.set(aKey, aDefaultValue) } javascript对象之间的区别。

Answer 7

只需在输入中提供密文，当前文本和明文属性:)

<input type="text" uib-datepicker-popup ng-model="dt" is-open="popup2.isopen" datepicker-options="dateOptions" ng-required="true" close-text="your close text here" current-text="Your current text here (today for example)" clear-text="Your clear-text here"/>

Answer 8

该网站非常精简。对我来说，在版本1.1.1中，我将配置对象作为attrib传递：

$scope.datepickerOptions = {
    formatYear: 'yy',
    startingDay: 0,
    showWeeks: false
};

在控制器中，能够设置一些选项：

.controller('DatepickerCtrl', function ($scope, uibDatepickerPopupConfig){

    uibDatepickerPopupConfig.showButtonBar = false;

但是＆＃39; showButtonBar＆＃39;不合作，所以查看我看到的代码＆ubeDatepickerPopupConfig＆＃39;。我将其传递给并将其单独设置并运行：

Unknown provider: datepickerPopupConfigProvider <- datepickerPopupConfig

使用＆＃39; datepickerPopupConfig＆＃39;我收到提供程序错误：

$scope

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

8 个答案: