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

` 起初，当我点击按钮时，日期选择器打开得很好。但是一旦打开一次，问题是下次单击按钮时日期选择器弹出窗口不会打开。

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

无论如何，您上面发布的解决方法给了我继续寻找解决方案的动力，非常感谢!