Datepicker不会在angular-ui版本0.11.0中打开两次
我想要有2个dateselect器，我正在使用Angular UI版本0.11.0。
我的HTML代码
<span ng-if="periods.period == 10"> <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" /> <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button> </span> <span ng-if="periods.period == 10"> - <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customEndDate" is-open="opened2" min-date="cdate.customStartDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" /> <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button> </span> 和我的JS代码是`
$scope.disabled = function(date, mode) { return ( mode === 'day' && ( date.getDay() === -1 || date.getDay() === 7 ) ); }; $scope.maxDate = new Date(); $scope.open = function($event,opened) { $event.preventDefault(); $event.stopPropagation(); $scope[opened] = true; }; $scope.dateOptions = { 'year-format': "'yy'", 'starting-day': 1 };
“首先，当我点击button时，datepicker打开就好了。 但是一旦打开了一次，问题是datepickerpopup窗口在下次点击button时不会打开。
我有同样的问题，我只能打开dateselect器控制一次使用button，但它不会打开第二次。 问题可能与范围问题有关，因为button不是inputHTML元素的子元素。 我能够通过稍微改变数据模型来获得button的工作。 例如，我没有使用$scope.isDatePickerOpen作为模型，而是改为$scope.datePicker.isOpen （并且设置了is-open="datePicker.isOpen" ）。 请注意，is-open的新数据模型不是直接挂起$scope ，而是被移动了一个深度（closures$scope.datePicker对象）。 这似乎使数据更“可找”。
另一件事我必须做的是改变一个计时器的数据模型。 例如：
$scope.openDatePicker = function($event) { $event.preventDefault(); $event.stopPropagation(); $timeout( function(){ $scope.datePicker.isOpen = true; }, 50); };
无论如何，上面提到的解决方法是让我继续寻找解决scheme的动力，所以谢谢！
快速修复：完全删除button标签，并修改dateselect器代码，所以它看起来像这样：
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="cdate.customStartDate.open" ng-click = "cdate.customStartDate.open = true" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
find其他StackOverflow问题的答案，只需使用is-open =“$ parent.isOpen”
我有同样的问题，但通过简单地把“打开”布尔variables在一个对象解决了我的问题：
< .. is-open="datePicker.opened" > ... $scope.datePicker = {opened:false}; $scope.openDate = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.datePicker.opened = true; };
我没有使用angular度那么久，但我认为这是范围问题，然后我了解到，总是有一个“在variables名称中的点”…（datePicker.opened）
（我现在看到一个类似的解决scheme上面的post，但我不需要使用超时，这个代码就足够了。）
我解决了这样的问题：
在html文件中：
<input is-open="opened" type="text" class="form-control" datepicker-popup="{{format}}" ng-model="md" />
并在JavaScript文件中，我刚刚添加了一个超时以“通知”，它已closures，以便能够再次打开它：
$scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; setTimeout(function() { $scope.opened = false; }, 10); };
我有最简单的一行解决scheme， 不需要容器对象，函数调用或其他麻烦如preventDefault。 你甚至不需要在范围内声明这个，因为undefined被评估为false。
... ng-click="dateOpened = !dateOpened" ...
我用angular-ui 0.13.0（Angular Bootstrap）testing了这个。 这是有效的，因为ng-click的调用已经在捕获默认事件。
我解决了这个问题，通过添加更改is-open从“打开”到“$ parent.opened”像这样。
seanControllers.controller('TracksController', ['$scope', function($scope) { $scope.openCalendar = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; } ]);
<form> <label>Eindtijd</label> <div class="input-group"> <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm" ng-model="track.eindtijd" is-open="$parent.opened" /> <span class="input-group-btn"> <button class="btn btn-default" type="button" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </div> </form>
只隔离你的dataPicker状态variables。
$scope.dataPickerStates = { open1:false, open2:false }
然后改变你的HTML
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="dataPickerStates.open1" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
最后是你的状态改变方法
$scope.open = function($event, opened) { $event.preventDefault(); $event.stopPropagation(); $scope.datePickerStates[opened] = true; };
而已。
同样的问题，但上述解决scheme并没有为我工作，原来我不包括这个文件：ui-bootstrap-tpls-0.14.2.js。
要点是要确保包含示例文档中提到的所有文件
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
祝你好运！
这是关于这个行为的解释
AngularJS MTV聚会：最佳实践（2012/12/11）
https://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=1870
你可以这样写。
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="date_picker1.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
在控制器中：
$scope.date_picker1 ={ date: new Date(), opened: false; }; $scope.open = function($event) { ..... $scope.date_picker1.opened = true; };
