Hide native keyboard on mobile when using react-date-picker

Question

I'm using react-date-picker, but on mobile the native keyboard shows up when clicked causing the date-picker to open on top, which doesn't look great. The online solution is to put the readonly attribute on the input field the date picker is bind with. But the read-date-picker component won't let me pass that prop...

Any nice solutions for this?

Answer 1

The readOnly is a good option to prevent the browser from showing the keyboard and typing on mobile. With the readonly set you will still be able to launch a click event on it.

When talking about the react-date-picker module the this will be also useful in non-mobile devices.

It is possible to add the option readOnly={true}, but it will disable completely the date picker inputs on all devices, as we can see on the following issues:

• Datepicker does not open with readOnly=true #1443
• make disable or readonly input field #961

Also, you will need to handle the onClick event and I don't think that this is a good idea.

Current workaround

At the moment, the solution to make the keyboard disabled on mobile and set the readOnly for all datePickers inputs will be edit the input properties on the component componentDidMount event:

 componentDidMount() {
    const datePickers = document.getElementsByClassName("react-datepicker__input-container");
    Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};