Question

我在角项目中使用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>

问题：在我选择日期之前，datepicker将保持打开状态，或者再次点击锚标记。

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

Answer 1

您可以向主体添加click事件，并检查目标元素是否为datepicker。如果它不是，则隐藏日期选择器。

不太理想，因为它使用了一些jQuery但不幸的是jQuery UI datepicker并没有带来onBlur事件。

＆＃13;

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;
    }
  };
});

＆＃13;

<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>

＆＃13;

当外部单击时，Angular Hide jQuery DatePicker

1 个答案: