How to disable typing and pasting in react-datepicker

Today we'll show you how to disable typing and pasting in react-datepicker. In the previous article, we have explained how to add a DateTime picker in React.

Different ways to disable typing and pasting in react-datepicker

1. Using onKeyDown() Method
2. Using onFocus() Method

1. Using onKeyDown() Method

Using the onKeyDown method with the preventDefault() function is an effective way to prevent typing in a DatePicker component in React.

<DatePicker
  ...
  onKeyDown={(e) => e.preventDefault()}
/>

2. Using onFocus() Method

Using the onFocus method to set the readOnly property is another effective way to prevent typing in a DatePicker component in React.

<DatePicker
  ...
  onFocus={(e) => e.target.readOnly = true}
/>

That’s it for today. I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂