Angular hide jQuery DatePicker 當在外面點擊時

我在一个角度项目中使用jQuery datepicker。

<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"]);
app.controller("controller", function() {
  var vm = this;
  vm.showDatePicker = false;
  vm.options = {
    changeYear: true,
    changeMonth: true,
    yearRange: '1900:-0'
  };
  vm.hideDatePickerOnBlur = function($event) {
    var $target = angular.element($event.target);
    // Target is the "Choose a date" link
    var isLink = $target.closest("#showDatePicker").length;
    // Target is in the datepicker
    var isDatePicker = $target.closest(".ui-datepicker").length;
    // Target is an element in the header of the datepicker (added this because isDatePicker was false when clicking either arrow even though they are descendants of the datepicker)
    var isHeader = $target.closest(".ui-datepicker-header").length;
    if (!isLink && !isDatePicker && !isHeader) {
      vm.showDatePicker = false;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-date/master/dist/date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
<body ng-app="app" ng-controller="controller as ctrl" ng-click="ctrl.hideDatePickerOnBlur($event)">
  <div>
    <!-- Anchor that toggles date picker -->
    <a id="showDatePicker" class="datepicker button dropdown" ng-click="ctrl.showDatePicker = true">
      <span>Choose a date</span>
    </a>
    <!-- Date picker -->
    <div ui-date="options" ng-show="ctrl.showDatePicker"></div>
  </div>
</body>

相关内容

最新更新

热门标签：