Hello Friends đź‘‹,

Welcome To Infinitbility! ❤️

react-datepicker throws the error invalid date when the user clears the date value on react date picker textinput. To handle invalid date issues many devs try to use editable false, disabled true, and readOnly but it also affects react date picker select date modal ( it will work some browsers but not all ).

Now the problem comes how can we disable type or pasting user data on date picker text input.

But the solution is pretty simple.

React Datepicker provides the onChangeRaw callback function it will call your provided function when the user trying to edit the date using text input.

Something like it will detect when the user typing or pasting data in react date picker text input.

Let understand how can we use onChangeRaw in react date picker.


render() {
  ...
  <DatePicker 
	  onChangeRaw={(e) => e.preventDefault();}
  />
  ...
}

Thanks for reading…