Search code examples
javascriptreactjsreact-day-picker

How not to allow the user to enter a value in input field with a selection option

I use the react-day-picker, (DayPickerInput component) and I want when the user click on the relevant field, when the day-picker window open, The user will not be able to enter a value using the keyboard, And he will can change the value by the pop-up window.

I don't know if this is a property of a DayPickerInput (I searched but did not find), or it's a general property of the field itself...

Solution

  • ok, i just need to add readOnly like this:

    <DayPickerInput
    readOnly // just it!!
    dayPickerProps={{localeUtils: MomentLocaleUtils, locale:"he"}}
    className={theme.dayPicker}
    placeholder={this.props.hintText}               
    value={value}
    onDayChange={(date: moment.Moment) => this.handleChange(date.toDate())}>                    
</DayPickerInput>

    (