在angular ui引导程序中设置日期选择器选项

Setting options to datepicker in angular-ui bootstrap

本文关键字：日期 选择器 选项 设置 angular ui 引导程序      更新时间：2023-09-26

我正在尝试使用angular ui bootstrap库中的日期选择器组件，如下所述：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'};

然而，它似乎不起作用，日期选择器没有改变。你知道我做错了什么吗？

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

   <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按钮栏作为属性，而不是传递给datepickerOptions的对象的一部分。

您使用的是带短划线的选项名称。只有将这些短划线大小写的名称用作元素的单个属性时，才需要这些名称。即

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

然而，datepicker-options希望json中的命名选项具有camelBased格式，如下所示：

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"也应该适用于日期选择器输入，如中所述https://angular-ui.github.io/bootstrap/#/datepicker，但我似乎无法做到这一点（使用版本0.12.1）

我知道这是一个老问题，但我想我应该指出你可能在哪里遇到了麻烦。

在控制器中，您将两次分配给$scope.dateOptions，因此会覆盖您的第一次分配。

所以你最初的任务是：

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

在接近尾声时被覆盖：

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

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

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

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

Plunker游戏示例。

日期选择器选项在0.11版本中引入，因此请确保您使用的是angular ui引导程序版本0.11或更高版本的

看起来您的dateOptions对象键不是基于骆驼的。试试这个：

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

Html属性应为破折号大小写，如show-button-bar或close-text等。

请注意datepicker-optionshtml属性和datepickerOptionsjavascript对象之间的差异。

只需在输入中提供关闭文本、当前文本和明文属性：）

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

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

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
相关文章：