React-date-picker: How to validate the fields?

[AryanshMahato]

Hello,

If any user types 13 in month's place.
OR
If any user types 32 in date's place.

handleChange is not running on second key stroke, how can I validate if user enters wrong date?

[yanfaingold]

i also need to handle this case (need some function to run for custom handling like if button disabled enabled depends on this data) or trigger the on change with empty date like you did with X button.

by the way is there any workaround to handle this issue at the moment?

[yanfaingold]

i found a workaround which not perfect cause it removes functionallity but at least this issue not occurs, you can set the div container of the date the following css so users can change the date only by using the pop up: pointer-events: none;

[AryanshMahato]

Yup! This could may work!! Thanks @yanfaingold

[HARIKSREEE]

I faced issues with validation. What I did is , I created custom input field to get values from user and used React-calendar package from the same author.
This gave me much control over the input fields

[AryanshMahato]

Is that Project Open Source @HARIKSREEE ?

[HARIKSREEE]

Yes thats open source. If you check the repositories of wojtekmaj, you will find it.

[wojtekmaj]

As per native date input, React-Date-Picker does not trigger onChange with invalid date. This would cause much more issues than problems solved.

To verify if a set of inputs is valid, use HTMLFormElement.checkValidity() and HTMLFormElement.reportValidity(). To validate one input only, similarly, use this methods on HTMLInputElements within React-Date-Picker.

[yanfaingold]

As per native date input, React-Date-Picker does not trigger onChange with invalid date. This would cause much more issues than problems solved.

To verify if a set of inputs is valid, use HTMLFormElement.checkValidity() and HTMLFormElement.reportValidity(). To validate one input only, similarly, use this methods on HTMLInputElements within React-Date-Picker.

why not add something similiar to onInvalid as a prop so we could easily handle it by filling the function?

[wojtekmaj]

Neat idea. For the time being, you can always listen for invalid events on date picker's parent div, since events are bubbling.