Datepicker在angular-ui版本0.11.0中没有打开两次

Question

我想要2个日期选择器,我正在使用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
                     };

`首先,当我点击按钮时,datepicker打开就好了.但是一旦打开一次,问题是下次点击按钮时,日期选择器弹出窗口不会打开.

Answer 1

我有同样的问题,我只能使用按钮打开日期选择器控件,但它不会再次打开.该问题可能与范围问题有关,因为该按钮不是输入HTML元素的子元素.通过稍微更改数据模型,我能够使按钮工作.例如,$scope.isDatePickerOpen我改为$scope.datePicker.isOpen(并设置is-open="datePicker.isOpen")而不是用作模型.请注意,is-open的新数据模型不会直接挂起$scope,而是移动一层(离开$scope.datePicker对象).这似乎使数据更"可寻找".

我要做的另一件事是改变计时器上的数据模型.例如:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

无论如何,上面发布的解决方法让我有动力继续寻找解决方案,谢谢!

Answer 2

快速修复:完全删除了按钮标记并修改了datepicker代码,所以它看起来像这样:

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

Answer 3

在其他StackOverflow问题上找到答案,只需使用is-open ="$ parent.isOpen"

/sf/answers/1414974711/

Answer 4

I had the same problem, but by simply putting the "opened" boolean var in an object solved the problem for me:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

I have not used angular for that long but I think this is scope problem and then I learned that it is always good to have "a dot in the variable name"... ( datePicker.opened )

(I now see a post above with a similar solution. But I did not need to use the timeout. This code was enough.)

Answer 5

我解决了这个问题:

在html文件中:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

在Javascript文件中,我只是添加了一个超时''通知'它已关闭,以便能够再次打开它:

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };