在IOS Safari浏览器中，AngularStrap datepicker不会在触发事件的模糊状态下消失。

My datepicker can disappear on blur of trigger event in the windows Chrome, windows Safari, mac Safari, android Chrome except IOS Safari browser.

我的datepicker可以在windows Chrome、windows Safari、mac Safari、android Chrome中消失，IOS Safari浏览器除外。

My code:

我的代码:

<input class="title-menu-left-input form-control"
        name="birthday" data-date-format="yyyy-MM-dd"
        data-date-type="string" data-autoclose="1"
        ng-model="dateFrom" placeholder="date" data-trigger="focus"
        bs-datepicker>

Anyone can help me to find why it doesn't disappear on blur of trigger event in IOS safari browser? Thanks in advance!

任何人都可以帮助我找到为什么它不会在IOS safari浏览器的触发事件中消失?提前谢谢!

There are some background which maybe help you to know more about my question. you can visit this page http://mgcrea.github.io/angular-strap/#/datepickers or plunker: http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC?p=preview. my code is the same as it. I don't know why it can disappear on blur of trigger event in the windows Chrome, windows Safari, mac Safari, android Chrome except IOS Safari browser. I wonder whether i do special process in IOS Safari. Anyone has come with this quesiton?

有一些背景知识可以帮助你更好地了解我的问题。您可以访问这个页面http://mgcrea.github。io / angular-strap / # / datepicker或砰砰作响:http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC?p=preview。我的代码和它一样。我不知道为什么它会在windows Chrome、windows Safari、mac Safari、android Chrome之外的触发事件中消失，除了IOS Safari浏览器。我想知道我在IOS Safari上是否做了特殊的处理。有人提出这个问题吗?

2 个解决方案

#1

What about the another source code ?, it should have a button to open date picker popup, and some from controller

另一个源代码呢?它应该有一个打开日期选择器的按钮，还有一些来自controller

#2

The problem is that 'blur' event is not fired on iPad. So when user touches screen outside of calendar input and dropdown I fire that event by this manually.

问题是“模糊”事件没有在iPad上触发。所以当用户在日历输入外触摸屏幕并下拉时，我就会手动触发这个事件。

controller: ['$scope', function ($scope) {

  function isiPadiPhone () {
    return ((navigator.userAgent.match(/iPad/i) != null) ||
      (navigator.platform.indexOf("iPhone") != -1) ||
      (navigator.platform.indexOf("iPod") != -1));
  }


  if (isiPadiPhone()) {
    document.body.addEventListener("touchend", handleTouchEnd, false);

    $scope.$on('$destroy', function () {
      document.body.removeEventListener("touchend", handleTouchEnd, false);
    });
  }

  function handleTouchEnd(event) {
    var dateInput = document.getElementById('your_input_id');
    var nextSibling = dateInput.nextSibling;

    if (!nextSibling || !nextSibling.classList || !nextSibling.classList.contains('dropdown-menu')) {
      //no calendar dropdown is shown now
      return;
    }

    if (isParent(event.target, nextSibling)) {
      return;
    }

    if (isParent(event.target, dateInput)) {
      return;
    }

    //we have to fire 'blur' event manually on iPad
    dateInput.blur();
  }


  function isParent(element, parent) {
    while (element != null) {
      if (element === parent) {
        return true;
      }

      element = element.parentNode;
    }

    return false;
  }

 }

#1