单击日期时关闭 angular-bootstrap-datetimepicker

Question

我正在使用 UI Bootstrap 下拉组件在点击时显示 angular-bootstrap-datetimepicker 日历。我大部分时间工作正常，但日历块仅在点击时关闭，点击日历时不会关闭。

如何在不使用 jQuery 的情况下使日历块关闭日历日期的 onclick？

<div uib-dropdown>
  <h4>
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
  </ul>
</div>

Answer 1

您不需要 jQuery。您可以使用$scope.$watch和angular.element来自动关闭是：

  $scope.$watch('date',function(newValue){
    newElement=angular.element(document.getElementsByClassName('.uib-dropdown'))
    if(!newValue) return
    angular.element(document.getElementsByClassName('dropdown')).removeClass('open')
  })

使用示例请参阅此 Plnkr：https://plnkr.co/edit/tJr7XO5dJUrIWshyfKX6?p=preview

请注意：最好使用标签 ID，而不是 class 名称（如果您有多个下拉列表）。

删除和添加 open class 相当于单击下拉箭头（并显示和隐藏日历）

单击日期时关闭 angular-bootstrap-datetimepicker

Closing angular-bootstrap-datetimepicker on date click

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap