0

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

Philip Pegden
  • 1,732
  • 1
  • 14
  • 33

1 Answers1

0

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

Wojciech Dynus
  • 911
  • 5
  • 11
  • 1
    Thank you. I actually used another solution, where I reworked the Component to just user the DayPicker, with state to hold whether it was showing or not. Your's would have been simpler! – Philip Pegden Feb 15 '18 at 15:35