Navigate back to the homepage

How to disable typing in React DatePicker

Infinitbility
React
September 8th, 2021 · 1 min read
How to disable typing in React DatePicker

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.

1render() {
2 ...
3 <DatePicker
4 onChangeRaw={(e) => e.preventDefault();}
5 />
6 ...
7}

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to check undefined in javascript

How to check undefined in javascript

Example of check undefined in Javascript, React, React Native, typescript, node, deno, next, vue, gatsby and all javascript library.

September 7th, 2021 · 1 min read
How to check type of variable in javascript

How to check type of variable in javascript

Example of check data type of variable Javascript, React, React Native, typescript, node, deno, next, vue, gatsby, and all javascript libraries.

September 6th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]