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

Question

我正在使用 UI Bootstrap 下拉组件在点击时显示 angular-bootstrap-datetimepicker 日历。我工作得很好，但是日历块只在点击离开时关闭，而不是在你点击日历时关闭。

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

Plunker
GIF

<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自动关闭is：

  $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，而不是类名（如果您有多个下拉菜单）。

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