Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with choice of month and year on Safari browser on iPhone 12 #947

Open
codeAKA opened this issue Jun 19, 2023 · 0 comments
Open

Comments

@codeAKA
Copy link

codeAKA commented Jun 19, 2023

In our project in React (version 17.0.2) we had a problem with choice of month and year on Safari browser on iPhone 12. When month or year was picked calendar was closed without getting of date value. We solved that by overriding Pikaday.prototype.show method - adding event listeners to all '.pika-select' elements in component which use Pikaday calendar:

Pikaday.prototype.show = function () {

   if (!this.isVisible()) {

     this._v = true;

     this.draw();

     removeClass(this.el, 'is-hidden');

     if (this._o.bound) {

         addEvent(document, 'click', this._onClick);

         this.adjustPosition();

     }

     if (typeof this._o.onOpen === 'function') {

         this._o.onOpen.call(this);

     }

     const pikaSelects = this.el.querySelectorAll('.pika-select');

     if (pikaSelects.length > 0) {

         pikaSelects.forEach((el) => addEvent(el, 'click', this._onMouseDown, true))

         pikaSelects.forEach((el) => addEvent(el, 'mousedown', this._onMouseDown, true))

         pikaSelects.forEach((el) => addEvent(el, 'touched', this._onMouseDown, true))

     }

 }
}

We also added other methods from Pikaday used inside Pikaday.prototype.show in component which use them:

// methods of Pikaday

const hasEventListeners = !!window.addEventListener;


const addEvent = function (el, e, callback, capture) {

  if (hasEventListeners) {

    el.addEventListener(e, callback, !!capture);

  } else {

    el.attachEvent('on'   e, callback);

  }

};


const removeClass = function (el, cn) {

  el.className = trim((' '   el.className   ' ').replace(' '   cn   ' ', ' '));

};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant