React-date-picker: Input Validation

[allys00]

How i get if the date-picker is valid ?

[wojtekmaj]

Use native Form data validation.

[Luis-Palacios]

@wojtekmaj while your answer guides in the right direction it still lack a lot of implementation details.

I have a scenario where I'm validating max/min date and as long as the user selects the date using the UI the validation works correctly however if the user manually input an invalid date then the UI visually reflects an invalid date using a red background however on the internal component state we don't have any reference as whether the date is currently invalid or not all we have is the last valid selected date. (Please correct me if I'm wrong)

So in order to know at any giving point if the date is currently valid I tried something like this:

// initial state
 state = {
        dateValue: null,
        isDateValid: false,
    }
.....
// onChange
handleDateChange = (selectedDate) => {
        /* Everytime we enter here is because the date-picker has already validated
           that the selectedDate is valid so we can assume the date is valid */
        this.setState({
            dateValue: new Date(selectedDate),
            isDateValid: true
        });
    }
....
    const dayCssClassSelector: string = 'react-date-picker__button__input__day'
    const monthCssClassSelector: string = 'react-date-picker__button__input__month';
    const yearCssClassSelector: string = 'react-date-picker__button__input__year';
// Just in case we have more than one datetime picker on the same UI
    const baseDatePickerCssClass: string = 'forecast-date';

....
// When redenring the component
                    <DatePicker
                            value={this.state.dateValue}
                            maxDate={maximumDate}
                            minDate={minimumDate}
                            onChange={this.handleDateChange}
                            className={this.baseDatePickerCssClass}
                        />

componenetDidMount() {
      // Check addInvalidListener implementation below
        this.addInvalidListener(this.dayCssClassSelector);
        this.addInvalidListener(this.monthCssClassSelector);
        this.addInvalidListener(this.yearCssClassSelector);
}

addInvalidListener = (cssClass) => {
        let input = document.querySelector(`.${this.baseDatePickerCssClass} .${cssClass}`);
        if (input)
            input.addEventListener('invalid', this.handleInvalidUserInput);
    }

handleInvalidUserInput = () => {
        this.setState({ isDateValid: false })
    }

If you know of a simpler way please let me know, finding a way to expose if the date is valid will definitely be helpful, Is this repository still being maintained? I might try to do a pull request to add support for this? did you already have an idea for this?

[wojtekmaj]

Interesting approach @Luis-Palacios!

One thing to mention is that React-Date-Picker has also a hidden date field, which is updated only with valid values. So if you're getting change event on one of the visible fields, but not on the hidden one, this also can mean the input is invalid or incomplete. This is because the native date field simply wouldn't accept such values as February 31st, but in React-Date-Picker's UI this might happen if you change the month afterwards.

Yest, this repository is maintained. I don't have an idea on how to make this idea into useful feature 🤔

[boroth]

I'm running into a similar issue as @Luis-Palacios . The DatePicker (Calendar) prevents users from clicking anything beyond the minDate and maxDate properly, but if someone types in a date outside of the range, the onChange event is never fired.

This means when the user submits the form and validation happens, the value of the DatePicker element is either:

1. null, so it causes confusion for validation on whether or not this is a true null (i.e. fails the "required" validation), or if it's null because they had typed in a date that's out of range (I would want to display a different validation message if this was the case)
2. Remains the previous valid date, so even though the input field shows a date outside of the minDate and maxDate, the user would be submitting the previously selected date that was within the min/max range. This is the scary case, because for example (assume the min/max range is 03/01/21-03/30/21):
3. The user types in or selects 03/01/21 (by mistake), and then corrects themselves to put 04/01/21 by typing it into the field.
4. When they hit submit, they think they're submitting 04/01/21, but it's actually submitting 03/01/21....

Is there a current way to handle something like this? My suggestion would be to still fire the onChange event even for invalid dates, but with some value other than null. Maybe false or an actual Invalid Date object?