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自动关闭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课程，点击下拉箭头（并显示并隐藏日历）

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

1 个答案: