[RangeCalendar] Custom validation for start/end date input

[BionBit]

Issue happens in these cases,

• start time is higher than end time
• end time is lower than start time

STR:

1. Open the RangeCalendar
2. Input the start date in the input field, 2 Dec
3. Input the end date in the input field, 1 Dec
4. Notice that the calendar start selection state resets, which is undesirable - people might just want an error indicator and fix the date themselves

Proposed fix (tested locally),
Allow the option the inject a custom dateInputValid checker, so the date input turns red in the above cases.

Example,
RangeCalendar,

/*
Closure magic used for injecting a validation rule for the dateinput when,
- start time is higher than end time
- end time is lower than start time
The alternative involves spaghetti code and multiple points of state mutation.
*/
<CalendarPart
...
dateInputValid={((endValue) => ((startDate) => startDate.isBefore(endValue)))(selectedValue[1])}
/>
<CalendarPart
...
dateInputValid={((startValue) => ((endDate) => endDate.isAfter(startValue)))(selectedValue[0])}
/>

CalendarPart,

<DateInput
...
isValid={dateInputValid}
/>

DateInput,

onInputChange = (event) => {
      const str = event.target.value;
      - const { disabledDate, format, onChange, selectedValue } = this.props;
      + const { disabledDate, format, onChange, selectedValue, isValid } = this.props;
  
      + if (!isValid(moment(str, format, true))) {
      +   this.setState({
      +     invalid: true,
      +     str,
      +   });
      +   return;
      + }
      ...
}