web-dev-qa-db-ja.com

ui.bootstrap.datepicker is-openがモーダルで機能しない

Bootstrap UI datepickerディレクティブを使用しています。元の例のようにdatepickerポップアップを開くdatepickerボタンを使用しようとしていますが、モーダルウィンドウでは機能しません。

[〜＃〜] plunker [〜＃〜] を参照してください

私は何を間違えていますか？

angularjsangularjs-directiveangular-ui
34
Kjartan Valur Þórðarson

次のように変更します：is-open="opened" to：

is-open="$parent.opened"

固定デモ Plunker

したがって、関連するHTMLのスニペットは次のようになります。

      <div class="input-group">

          <input type="text" class="form-control" 
                 datepicker-popup="dd.MM.yyyy"
                 ng-model="dt"
                 is-open="$parent.opened"
                 ng-required="true"
                 close-text="Close" />
          <span class="input-group-btn">
          <button style="height:34px;" class="btn btn-default" ng-click="open()">
          <i class="icon-calendar"></i></button> <b><- button not working</b>
          </span>
        </div>
96
Maxim Shoustin

私はそれを機能させるためにタイムアウトを入れなければなりませんでした：

function toggleStart($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $timeout(function () {
        vm.isStartOpen = !vm.isStartOpen;
    });
}

私のテンプレートは次のようになります。

<input type="text" class="form-control"
        datepicker-popup ng-model="vm.startDate"
        is-open="vm.isStartOpen" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default"
            ng-click="vm.toggleStart($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
13
pomber

datepickerディレクティブは、外部からアクセスできない独自のスコープを作成します。これを解決するために使用できます。

$parent.isopen

または、いくつかのオブジェクトプロパティ名を使用して、プロトタイプの継承を回避します。

$scope.config.isopen=true;

ng-model="config.isopen" の代わりに ng-model="isopen"。

7
Aditya kumar

open関数は本当に必要ありません：

    <div class="input-group">
        <input type="text" class="form-control"
               datepicker-popup="dd.mm.yyyy"
               ng-model="dt"
               is-open="$parent.opened"
               ng-required="true"
               close-text="Close" />
        <span class="input-group-btn">
        <button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
        <i class="icon-calendar"></i></button> <b><- button not working</b>
        </span>
      </div>
0
Sam Barnum

また、アイコンで日付ピッカーを初期化するように働きます。

HTML

<p class="input-group" ng-disabled="invoiceDateDisable">
    <input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

JavaScript

$scope.open = function () {
    $scope.opened = true;
};
0
Bittu Singh