AngularStrap datepicker doesn't disappear on blur of trigger event in the IOS Safari browser

Question

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

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!

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?

Limekiln

Answer 1

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

Kentiga

there is no other source code, i have add the 'mgcrea.ngStrap' to my angular module, you can visit this page mgcrea.github.io/angular-strap/#/datepickers or a plunker plnkr.co/edit/?p=preview. my code is the same as it. – Limekiln

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

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

 }

Chiropodist