0

I'm using the following to prevent default on other input fields, but doesn't seem to work completely on my DayPickerInput.

//Prevent default function

onKeyPress = (event) => {

  event.preventDefault();

}

//DayPickerInput

    <DateObject

        inputProps={

          {className: 'pl2 br3 shadow-1 dropdownButtonDate', onKeyPress: this.onKeyPress}

        }

        value={selectedDay}

        onDayChange={this.handleDayChange}

        dayPickerProps={{

          selectedDays: selectedDay,

          disabledDays: [{

            daysOfWeek: [0, 6],

          },

          {

            before: new Date(this.dateRestriction())

          }]

        }}

     />

It doesn't let me write anything, which is great!

But when I tried to delete my date, it's allowing me to do so.

How could I stop this behavior?

Abak
  • 41
  • 1
  • 11

1 Answers1

0

After tweaking it, I found my own solution.

Use "onKeyDown" instead of "onKeyPress" for DayPickerInput. OnKeyPress to preventDefault() will prevent writing on the input field, but will still allow delete.

The modification below worked and I can no longer delete the date that was picked, nor write on it.

    inputProps={

      {className: 'pl2 br3 shadow-1 dropdownButtonDate', onKeyDown: this.onKeyPress}

    }

Note: You can still select a new date to replace the value.

Abak
  • 41
  • 1
  • 11
  • Additionally, if you wish to remove that annoying blinking cursor, you can use CSS and add it as a className. CSS: .removeCursor { color: transparent; display: inline-block; text-shadow: 0 0 0 gray; &:focus { outline: none; } } JS: inputProps={ {className: 'pl2 br3 shadow-1 dropdownButtonDate removeCursor', onKeyDown: this.onKeyPress} } – Abak Nov 06 '18 at 19:17