Hide native keyboard on mobile when using react-da

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

So I ended up modifying the input-element in the componentDidMount lifecycle, like so;

document.getElementsByTagName("input")[0].setAttribute("readonly", "readonly");

This prevents the native visual keyboard on my phone to display. However it creates this "not allowed" red ugly cursor on desktop when hovering the input field, so I fixed that with by targeting my date-picker input.

.react-datepicker-wrapper input[readonly]{cursor: pointer;}

I welcome alternative solutions though.