在angular-ui bootstrap中設置datepicker的選項

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'};

然而，它似乎不起作用，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期望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 文檔 ，彈出設置可以通過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

看起來你的dateOptions對象鍵不是camelCased 。 嘗試這個：

$scope.dateOptions = {
    'showButtonBar': 'false', 
    'closeText':'SomeText'
};

Html屬性應該是破折號的 ，如show-button-bar或close-text等。

注意datepicker-options html屬性和datepickerOptions javascript對象之間的區別。

Answer 7

只需在輸入中提供close-text，current-text和clear-text屬性:)

<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中，我將配置對象作為屬性傳遞：

datepicker-options="datepickerOptions"

在控制器中，能夠設置一些選項：

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

但'showButtonBar'不合作，所以查看代碼我看到'uibDatepickerPopupConfig'。 我將其傳遞給並將其單獨設置並運行：

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

    uibDatepickerPopupConfig.showButtonBar = false;

使用'datepickerPopupConfig'，我收到提供程序錯誤：

Unknown provider: datepickerPopupConfigProvider <- datepickerPopupConfig