Impossible to validate with manual input

I’ve used this library before, and it’s worked great, except for one case.

The user is allowed to enter manual input (unless the readOnly prop is set to true, but that impacts UX, so I’d prefer to not do that). However, the date parsing logic inside this library will ignore any invalid inputs and not propagate change events for invalid dates.

What this means is that there is a disconnect from what the user sees and what the component reflects to the caller. The user could enter “awehfoiajfoa” into the input, but the caller will still have the previous valid date. There is absolutely no way to validate arbitrary input. (see next comment)

Here are potential solutions:

• The component fires onChange any time the input changes instead of only in the case of a valid date. Instead of returning null from parseDate, you can return the invalid moment instance. This will allow developers to simply check the isValid() method on the moment instance to do validation.
• Abstract the date/time library used, have the API just use strings, and still fire onChange on every input change. The developer won’t be required to use moment and can just use their own validation processes. The dateFormat and timeFormat props can control how the component internally parses and formats the dates.
• Add validation functionality. In the case of an invalid parse, the component can fire some onValidate event that will pass a boolean for whether the user’s input is valid, or perhaps an error message. This will allow the developer to respond to invalid input by toggling classes, disabling submit buttons, etc.
• Add a prop enableManualInput to allow the user to manually edit the value. This should be defaulted to false so that the developer can guarantee that there will always be a valid date, as the user can’t enter anything else.

In any case, it is impossible (not impossible, see next comment) for a developer to validate this component, and this is something the component should enable.

[KennyMonster]

Even if you detect that something is invalid in your onChangeRaw handler, what are you supposed to do about it? You can’t stomp the user’s input as they’re typing.

jchitel is correct in that you can use onChangeRaw as a workaround, as long as you simply do nothing on invalid input.

It’s not intuitive though as normally when you have a “controlled” form component in React, you would pass in the value as a prop, and the form element would never change except on prop value change. react-datepicker works both like a controlled and also uncontrolled component, as you can edit the field, and it keeps local state independent of the state value passed into it as a prop. OTOH, updating the value prop clobbers the local DatePicker edit state.

Below is my app specific wrapper component that seems to work as expected:

class DateTimePicker extends React.Component {
  onChangeRaw = (e) => {
    let m = moment(e.target.value);
    if (m.isValid()) {
      this.props.onChange(m);
    }
  };

  render() {
    return <DatePicker
      className="form-control"
      selected={this.props.selected}
      onChange={this.props.onChange}
      onChangeRaw={this.onChangeRaw}
      showTimeSelect
      dateFormat="LLL"
    />
  }
}

[jchitel]

Ah, I seem to have spoken a bit too soon. I didn’t notice the onChangeRaw prop, which behaves similarly to my second suggestion.

However, I do think that a discussion around validation is warranted. A developer should not have to use an API labelled “raw” to add validation logic to a component.