React-dates: Method to display errors

[ctrlaltdylan]

It would be helpful to include error strings as props for cases like:

• DateRangePicker
  Must select a start date
Must select an end date

• SingleDatePicker
  A date is required

Or possibly passing down custom errors as props.

[ctrlaltdylan]

Somehow I missed the required={true} prop on the DateRangePicker, but I don't see how it recognizes when the form is being submitted. Also it would still be a nice improvement to have the ability to alter the presentation of the .DateInput's by passing styles/classNames rather than just error messages (which is still nice).

[majapw]

Hi @ctrlaltdylan, as you noticed required={true} is a html form attribute that I believe will prevent you from submitting a form. However, there's still won't be an error message (or any error styling) or anything like that and I don't think it'll do much in the react ecosystem where things tend to be done client-side.

If you have a proposal for how this would look design-wise (maybe even just applying an error class to the inputs)? I feel like the details are not entirely hashed out.

To be fair, the parent component that you are writing should have access to the date values so you should be able to write your own error message a la

onSubmit() {
  if (!this.state.startDate || !this.state.endDate) {
    this.setState({ showErrorMessage: true });
  } else {
    // handle form submit
  }
}

render() {
  return (
    <div>
      {this.state.showErrorMessage && "Please enter a start date"}
      <DateRangePicker ... />
      <button type="submit" onClick={this.onSubmit}>Submit</button>
    </div>
  );
}

The only thing missing would be some sort of error styling on the drp itself. Is that something you are interested in/think is valuable? What would that look like?

[aghreed]

I believe there would be value in providing an error prop on the date picker itself. It's pretty common for form inputs in an error state to have red text or a red border or both.

I don't know this library very well yet (just started digging into it), but I think this could be accomplished pretty cleanly by expanding the Aphrodite theme to include some properties similar to how the input focused state is handled. For example, reactDates.border.input.borderError or reactDates.border.input.borderBottomError. Essentially these *Error styles can be applied when an error prop on the date picker resolves to be true.

It is my experience (so far) that this is only an issue if you are customizing styles by extending the Aphrodite DefaultTheme, as overriding styles is pretty difficult by any means once you commit to using the theme interface. The classNames that are generated and applied to the date picker are not consistent and all styles have !important in them, which just makes overriding those difficult as well as a code smell. However, if you don't register the Aphrodite interface and theme, you can accomplish an error state style on the date picker with the right CSS selectors.

[ljharb]

That shouldn’t be the case if you extend via the theme, instead of trying to override with a .css file.

[aghreed]

@ljharb perhaps I wasn't being very clear. My experience is the opposite of your statement, but let me elaborate.

As I understand, there are two ways to apply custom styles to the date picker - overriding with a .css file, or providing your own theme implementation.

By overriding with .css, I am able to apply the styles I like in respect to showing the date picker field in an error state. This works great, and I have no issues with this approach. This breaks down if you go to use a Theme though.

When providing custom styles via a theme, I am unable to style for an error state because as far as I know from looking at the theme there is no concept of "error" in the interface. Additionally, the styles generated from the theme all have an !important flag, so overriding these with a custom .css sheet isn't great.

However - my suggestion is that if there was an error prop on the date picker that would add a classname when true that caused a theme configured reactDates.border.input.borderError style to be applied, react-dates and it's theme could support an error state. This would work much like when the input is focused, which causes a theme configured reactDates.border.input.borderFocused style to be applied.

[ljharb]

@aghreed so if I’m understanding correctly, your use case could be met by providing a way for a custom theme to style an error state?

[aghreed]

@ljharb yes! That's a far more succinct way to say it.

Although I do think there's still going to need to be a way to "activate" those error state styles on the date picker - i.e., an error bool prop.

Happy to help put a feature like this together as well.

[ljharb]

@majapw, what are your thoughts?