Question

我在我的应用中使用Angular Ui Datepicker。奇怪的事情正在发生，可能是一个错误。如果datepicker元素中有子元素，则日期选择器不起作用（不显示）。

在下面的示例中，如果我将span（或任何其他）标记放在a标记内 - 我放置了我的日期选择器 - 它将无效，但如果其中没有子元素，则可以如预期的那样。

这是一个错误还是我遗漏了什么？

var app = angular.module('app', ['ui.bootstrap']);

app.controller("TestController", function($scope) {
  $scope.isOpen = false;
  $scope.isOpen2 = false;
  $scope.isOpen3 = false;

  $scope.popupOptions = {};
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app">
  <a href="javascript://" ng-model="deadline" is-open="isOpen" ng-click="isOpen = !isOpen" datepicker-popup="popupOptions"> This will show Date picker </a>
  <br />
  <a href="javascript://" ng-model="deadline2" is-open="isOpen2" ng-click="isOpen2 = !isOpen2" datepicker-popup="popupOptions"> <span> This will not </span> 
  </a>
  <br />

  <a href="javascript://"> <span ng-model="deadline2" is-open="isOpen3" datepicker-popup="popupOptions" ng-click="isOpen3 = !isOpen3"> This will also show  </span> 
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>

Answer 1

看起来只能在最里面的元素上设置日期选择器。这可能是设计方式，因为我没有找到在父元素上设置datepicker的例子。

此外，如果在span（或任何其他子元素）上设置了datepicker，则代码可以正常工作。

<a href="javascript://">
    <span ng-model="deadline" is-open="isOpen" ng-click="isOpen = !isOpen" datepicker-popup="popupOptions">datepicker set on span inside anchor</span>
</a>

Plnkr

Answer 2

这是一个使用带有引导输入的指令，显示日历按钮

的示例

<强> HTML

<p class="input-group">
    <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="myDate" is-open="isOpen"  />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openCalendar($event, prop)"><i class="fa fa-calendar"></i></button>
    </span>
</p>

<强> JAVASCRIPT

app.controller('MyController', function() {
    var that = this;

    this.isOpen = false;

    this.openCalendar = function(e) {
        e.preventDefault();
        e.stopPropagation();

        that.isOpen = true;
    };
});

请参阅演示：https://github.com/Gillardo/bootstrap-ui-datetime-picker

Angular UI Bootstrap datepicker发生故障

2 个答案: