如何在一个页面上至less有两个ui-bootstrapdateselect器？

我想在页面上有几个dateselect器。 但是使用UI-Bootstrap的默认解决scheme是不可能的，没有一个dateselect器可以打开。 彼此冲突。 这是我的代码：

<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复制/粘贴了datepicker代码。 他们相互冲突。 当我点击<input>字段打开一个dateselect器，没有人可以正确打开，都打开一秒钟，立即消失。

我怎样才能在一个页面上有几个dateselect器？

Answer 1

您可以使用不同的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; }; 

Answer 2

我仍然在学习Angular和UI-Bootstrap，所以在阅读我的答案时要考虑到这一点。 我做了一些类似于BlueMonk的事情，但是以一种灵活的方式让我的控制器代码不必知道页面上的dateselect器的实例。

我把我的控制器中的所有datepicker代码放到一个名字空间中：

 $scope.datePicker = (function () { var method = {}; method.instances = []; method.open = function ($event, instance) { $event.preventDefault(); $event.stopPropagation(); method.instances[instance] = true; }; method.options = { 'show-weeks': false, startingDay: 0 }; var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; method.format = formats[0]; return method; }()); 

然后使用下面的标记：

 <p class="input-group"> <input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> <p class="input-group"> <input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> 

这对我来说就像一个魅力。

Answer 3

这应该工作（不同型号，开放标志和function）：

 <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; }; 

Answer 4

无需其他更改是必要的。 只要你将每个dateinput包装在自己的控制器div中，范围就会保留在那个input中

例：

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

Answer 5

虽然这是一个老问题，但却回答了和我一样陷入同样问题的人。

我把dateselect器分配给那个元素，它工作得很好。 示例代码。

  $(document).on('focus','.datepicker',function(){ $(this).datepicker(); }); 

Answer 6

这是什么为我工作：$ id是范围id，由angular提供。

  ctrl.opened = {}; ctrl.openDatatimePicker = function ($event, id) { $event.preventDefault(); $event.stopPropagation(); ctrl.opened[id] = true; } 

  <input type="text" class="form-control" uib-datepicker-popup="{{vm.datepickerFormat}}" ng-model="x.FraDato" is-open="vm.opened[$id]" datepicker-options="vm.datepickerOptions" ng-required="true" ng-click="vm.openDatatimePicker($event,$id)"/>