ui-bootstrapのdatepickerを1つのページに2つ以上表示させるには？

1つのページに複数の日付ピッカーを表示したいのですが、UI-Bootstrapのデフォルトのソリューションでは、1つの日付ピッカーを開くことができません。しかし、UI-Bootstrapのデフォルトのソリューションでは、どのdatepickersも開くことができず、不可能です。互いに競合しています。以下は私のコードです。

<div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </div>

私はちょうどサイトhttp://angular-ui.github.io/bootstrap/#/datepicker から日付ピッカーのコードのコピー/ペーストをしました。それらは互いに衝突しています。日付ピッカーを開くために<input>フィールドをクリックすると、どちらも正しく開くことができず、両方とも一瞬だけ開いてすぐに消えてしまいます。

1つのページに複数のdatepickerを表示させるにはどうしたらよいでしょうか？

Green
編集された質問 27日 10月 2013 в 12:58
プログラミング
angularjs datepicker angular-ui-bootstrap
27日 10月 2013 в 12:48
3 ビュー

別の関数を使うのではなく、別の is-open 属性を使い、その属性を ng-click 関数で渡すことができます。それでも、異なるモデルが必要です。

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        Submit
    </div>

そして、コントローラ内部では

   $scope.open = function($event,opened) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope[opened] = true;
  };
Matthew
編集した答え 13日 12月 2015 в 5:27
解説 (11)

これなら大丈夫（機種、オープンフラッグ、機能が違う）。

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        Submit
    </div>

そしてコントローラ内。

   $scope.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
  };

   $scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened2 = true;
  };
解説 (3)

追加で変更する必要はありません。各日付の入力をそれ自身のコントローラ div でラップしている限り、スコープはその入力に存在することになります。

例

<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
解説 (1)