web-dev-qa-db-ja.com

角度UIでdatepickerにオプションを設定bootstrap

ここで説明されているように、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'};

ただし、機能していないようで、日付ピッカーは変更されません。私が間違っていることについて何か考えはありますか？

javascriptangularjsangular-uiangular-ui-bootstrap
4
Jakub

私はこれに対する解決策を見つけました、私は属性としてオプションを置きました、例えば：

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

そのため、datepickerOptionsに渡されるオブジェクトの一部としてではなく、属性としてshow-button-barを配置しました。

12
Jakub

ダッシュケースオプション名を使用しています。これらのダッシュケースの名前は、要素の単一の属性として使用する場合にのみ必要です。つまり.

<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"は、 https://angular-ui.github.io/bootstrap/#/datepicker で説明されているように、datepicker入力でも機能するはずですが、それを機能させることができないようです（バージョン0.12.1）

8
Marcel

私はこれが古い質問であることを知っていますが、あなたがおそらく問題を抱えている場所を指摘したいと思いました。

コントローラで$scope.dateOptionstwiceに割り当てているため、最初の割り当てが上書きされます。

したがって、最初の割り当ては次のとおりです。

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

これを最後に行うと上書きされます：

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

DatePicker documentation によると、ポップアップ設定はdatepickerPopupConfigを介してグローバルに構成できるため、コントローラーに追加する必要があります。

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

closeTextの設定は何らかの理由で機能しません。理由はわかりません。

Plunker の例を再生します。

5
Martin Bajcar

datepicker-optionsはバージョン0.11で導入されたため、angular-ui-bootstrapバージョン0.11以降を使用していることを確認してください

1
kazuar

dateOptionsオブジェクトキーがcamelCasedではないようです。これを試して：

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

Html属性は、show-button-bar、close-textなどのようにダッシュケースである必要があります。

datepicker-optionshtml属性とdatepickerOptionsjavascriptオブジェクトの違いに注意してください。

0
Andrei Cojea

入力に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"/>
0
Luis Cabrera Benito