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を表示させるにはどうしたらよいでしょうか?
別の関数を使うのではなく、別の 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"/>
<button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
</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" />
<button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
そして、コントローラ内部では
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
これなら大丈夫(機種、オープンフラッグ、機能が違う)。
<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"/>
<button class="btn" ng-click="open1()"><span class="glyphicon glyphicon-calendar"></span></button>
</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" />
<button class="btn" ng-click="open2()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
そしてコントローラ内。
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
追加で変更する必要はありません。各日付の入力をそれ自身のコントローラ 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"/>
<button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</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" />
<button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
</div>