Problem with choice of month and year on Safari browser on iPhone 12
Author: codeAKACreated Jun 19, 2023Updated 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 + ' ', ' '));
};Source: Pikaday/Pikaday