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”

https://stackoverflow.com/a/20213924/1596661

我有同样的问题,但通过简单地把“打开”布尔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; };