How do I hide the keyboard on iOS

Question

I am using React-Day-Picker along with react-redux-form. I need to be able to hide the keyboard for mobile - this is a responsive app. Here's an extract from my code. Am not sure where / how to achieve this, without the DayPickerInput disappearing when on a desktop.

import {Control, Errors, actions} from 'react-redux-form'
import DayPickerInput from 'react-day-picker/DayPickerInput'

...other code here...

    const DateInput = (props) => <DayPickerInput              
                                value = {modelValue === 0 ? "Select date..." : new Date(modelValue)}
                                format = "ddd, D MMMM YYYY"
                                formatDate={formatDate}
                                parseDate={parseDate}
                                onDayChange={day => {let newValue = (day && day.valueOf()) || new Date().valueOf(); dispatch(actions.change(model, newValue))} }
                                dayPickerProps= {{firstDayOfWeek: 1, showOutsideDays:true}}/>
return(
            <Control model={model} 
                className={style}
                component={DateInput}
                validators={validation}
                validateOn="change"
                disabled={disabled} type="text" readOnly>
            </Control>
  )

Kind regards

Phil

Answer 1

Try passing inputProps={{readOnly:true}} to your DayPickerInput component

<DayPickerInput
    {...props}
    inputProps={{readOnly: true}}
/>

This should prevent keyboard to appear on iOS. Disadvantage of that is of course that you cannot type in date using keyboard on destkops as well, but all depends on your needs