Javascript 单击外部时角度隐藏jQuery日期选择器

我在一个角度项目中使用jQuery日期选择器

<div>
  <!-- Anchor that toggles date picker -->
  <a class="datepicker button dropdown" ng-click="ctrl.showHideDatePicker">
    <span>Choose a date</span>
  </a>

  <!-- Date picker -->
  <div ui-date="options" ng-show="ctrl.showDatePicker"></div>
</div>

选择一个日期

问题：日期选择器将保持打开状态，直到我选择一个日期，或者再次单击锚定标记

---

所需结果：我希望通过单击日期选择器本身之外的任何内容来关闭日期选择器。

您可以向正文中添加一个单击事件，并检查目标元素是否为日期选择器。如果不是，则隐藏日期选择器

这并不理想，因为它使用了一些jQuery，但不幸的是jQuery UI日期选择器没有附带onBlur事件

var-app=angular.module（“app”、[“ui.date”]）；
应用程序控制器（“控制器”，函数（）{
var vm=这个；
vm.showDatePicker=false；
vm.options={
变化年：是的，
变化月：对，
年份范围：'1900:-0'
};
vm.hideDatePickerOnBlur=函数（$event）{
var$target=angular.element（$event.target）；
//目标是“选择日期”链接
var isLink=$target.closest（“#showDatePicker”）.length；
//目标在日期选择器中
var isDatePicker=$target.closest（“.ui datepicker”）.length；
//Target是datepicker头中的一个元素（添加此项是因为当单击任一箭头时isDatePicker为false，即使它们是datepicker的后代）
var isHeader=$target.closest（“.ui日期选择器标头”）.length；
if（！isLink&！isDatePicker&！isHeader）{
vm.showDatePicker=false；
}
};
});

选择一个日期