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”

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

Answer 4

我遇到了同样的问题，但只是将“打开”的boolean var放在一个对象中解决了我的问题：

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

我没有长时间使用角度，但我认为这是范围问题然后我才知道在变量名中加上一个点总是好的...（datePicker.opened）

（我现在看到上面的帖子有类似的解决方案。但我不需要使用超时。这段代码就够了。）

Answer 5

我解决了这个问题：

在html文件中：

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

并且在Javascript文件中，我刚刚添加了超时以通知＆＃39;为了能够再次打开它，它已经关闭了：

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

Answer 6

I have the easiest, one-line solution that does not require container objects, function calls or other hassles like preventDefault. You don't even have to declare this in scope because undefined is evaluated as false.

...
  ng-click="dateOpened = !dateOpened"
...

I tested this with angular-ui 0.13.0 (Angular Bootstrap). This works because the invocation of ng-click is already trapping the default event.

Answer 7

我通过将“打开”更改为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>

Answer 8

只需隔离您的dataPicker状态变量即可。

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

就是这样。

Answer 9

同样的问题，但上述解决方案对我不起作用，原来我不包括这个文件：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">

祝你好运！

Answer 10

以下是有关此行为的说明

AngularJS MTV Meetup：最佳实践（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;
 };

Answer 11

看了这么多答案之后。对我有用的东西如下：

$scope.datePicker = {
  date_opened:false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

HTML模板：

<div class="input-group">
    <input name="date_obj_from" type="text" class="form-control" uib-
    datepicker-popup="dd-MMMM-yyyy" ng-model="date_obj_from" is-
    open="datePicker.date_opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" />
    <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-
    click="open_from($event)">
    <i class="glyphicon glyphicon-calendar"></i>
       </button>
    </span>
</div>

我们不必涉及修复此问题的$ timeout。我的意思是为什么如果有人不需要它。我通过更改我的attribue is-open =＆＃34; date_opened＆＃34;来解决了这个问题。 to is-open =＆＃34; datePicker.date_opened＆＃34;。始终是初始化对象键的最佳实践。

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

11 个答案:

看了这么多答案之后。对我有用的东西如下：

HTML模板：