Air Datepicker won't load in Instagram browser on iPhone!

[fabregas4]

Air-datepicker doesn't work in the Instagram in-app browser on an iPhone. This became a major issue for me with much of the audience to my app coming via that channel.

This is on an Iphone 13 Pro Max, but have had the issue also reported on an iPhone 15.

I was able to narrow it down to this bit of code in datepickerCell.js:

render = () => {
        this.$cell.innerHTML = this._getHtml();

        this._handleClasses();

        return this.$cell;
    }

this._getHtml() returns the contents of a date cell which in most cases is going to be the number representing the day of the month. The problem is that it returns as a Number type, but innerHTML expects a String. This causes the Instagram in-app browser to error and as such the calendar doesn't load at all.

Replacing this._getHtml() with String(this._getHtml() || '') fixes the issue.

The air-datepicker.com website itself has an issue loading in the Instagram in-app browser on the aforementioned devices, presumably for the same reason (though I can't easily check the console).

If I visit air-datepicker.com by following an Instagram link (profile link, DM, etc), I get a page that only shows:

Application error: a client-side exception has occurred (see the browser console for more information)

[t1m0n]

Hm, I've checked on IPhone 13 pro, and it worked fine. Maybe it depends on Instragram version or iOS? But for now it's working fine for me.

[fabregas4]

It may depend on a few device/OS/app factors, but it was reported by multiple users on different devices.

It would happen every single time on an iPhone 13 Pro Max I was testing with. Here's a screenshot of what air-datepicker.com looks like in it.

This is an error message set by the site (see the main______.js file). I'm going to guess this is caused by the the same issue my app was having, where the stack trace pointed to the specific bit of code I mentioned in original post.

I would recommend updating the code either way.
The innerHTML property expects a String, not a Number.
It just happens to still work fine as a Number in the majority of browsers.