DateInput default settings can easily crash application in dev mode

[adidahiya]

Summarizing a collection of grievances in #3394, #2965, #3407, and other issues:

Environment

• Package version(s): datetime 3.18.5
• Operating System: macOS
• Browser name and version: any

Code Sandbox

From @barrymay in #3394 (comment):

https://codesandbox.io/s/angry-morse-hn3rm?file=/src/App.js

To see the problem:

• Enter 1/1/1999. Hit 'enter'

Actual behavior

Page crashes during validateProps() lifecycle method

Expected behavior

Page does not crash, instead we get some nicer out-of-the-box error handling like the docs example:

Possible solution

The developer has provided a valid parseDate function, but since they are using the default values of minDate and maxDate set by the component, they are not able to properly validate whether the entered date is out of bounds. Another option would be to wrap the component in an ErrorBoundary, but that's clunky and heavy-handed.

In general I think users should be setting their own minDate and maxDate bounds. But since we have already set the defaults in the API I think we should improve the developer experience here without breaking the API.

[barrymay]

Thanks for collecting these together.

On your comment above, I don't mind setting minDate and maxDate (I'm likely to do that). But even when I do that, there's no workaround way I can see to get to the 'Out of range' message from the demo when the user types in a bad (out of range) date and hits enter, at least not in dev NODE_ENV mode, due the impact of validateProps.

My workaround at present it is to wrap the component and test the min/max in the parse date function to return a null (empty result) when that occurs, but that's still not as good as the demo result.

[Ajaybhardwaj7]

This can help atleast crashing and falling back to values instead "invalid date" for out of range message. This also have some caveats.

function dateOptions(format: string, minDate: Date, maxDate : Date): IDateFormatProps {
	return {
		formatDate: (date) => moment(date).format(format),
		parseDate: (str) => {
            const momentDate = moment(str, format);
            const isValidInput = momentDate.isValid();
            if(isValidInput && momentDate.isBefore(minDate)){
                return minDate;
            } else if(isValidInput && momentDate.isAfter(maxDate)){
                return maxDate;
            } else if(isValidInput){
                return momentDate.toDate();
            }else {
                return false;
            }
        }
    }
}