React-dates: Question: How to get the value of the input when it's an invalid value?

[andrefox333]

Hi there, any suggestions on how to disable manual entry on the input fields?

Thank you :)

[ljharb]

That would not be accessible, nor gracefully degrade when JS breaks or fails to load. Why would you want that?

[andrefox333]

Hmm I see. Rephrasing my question, is there a way for me to get the value of the input even if it is not a valid value? Right now, onDateChange(), if the date is invalid, all I see is a null value. Basically, I'm needing to validate the value of the input field.

[ljharb]

That's a different question indeed :-) can you give an example value, and explain a bit about what validation you'd want to perform?

[andrefox333]

Cool, example values would be:

• 1/1/2017 - basically any invalid formats (react-dates wants a MM/DD/YYYY format)
• 1/1/2017! - if inputs have invalid characters
• date that is out of the acceptable range.

I'll change the title of this question :) Lol.

[ljharb]

Thank - what validation would you want to perform?

[andrefox333]

Basically if the value in the input field is a valid date, which it could be a moment object or in proper format of MM/DD/YYYY.

I can handle the validation outside of react-dates, I just need to be able to have access to the actual value of the input field :)

[ljharb]

Right - but moment does the validation for you, that's why I'm wondering what kind of validation you want to perform yourself.

I do think it makes sense for react-dates to expose the actual input value, fwiw.

[andrefox333]

Yeah, having access to the actual input value would be nice. I'd like to be able to show a proper error message according to the validation.

Curious what kind of validation does Moment have and maybe we can expose that instead?

I appreciate your time and answering my questions, @ljharb.

[majapw]

I will look into how best to accomplish this.

[vlamitin]

Is there any updates for gaining access to the actual value of the input field ?

[passi246]

I got my manual input validation working, so ill leave it here.
All i use is the propagation of events. Therefore i use a container element, which gets the onChange event of the input propagated. The onChange Event is not fired for onDateChange.

````

````

[timhwang21]

If all that's wanted is the value from the input field, passing some callback al the way down to DateInput and running it on the partial string might be the way to go.

For more customizable validation, would it work to allow customFormat to be an array of formats instead of just a string? And concat the formats in toMomentObject() instead of using just the one.

[MaxiSantos]

@passi246 I'm also trying to get the value of the input so I can validate them. The moment validation isn't very useful because when you click on the first date the endDate is null but that dosen't mean it's invalid because the user hasn't ended selecting dates. I can't get the onChange event working for me on a wrapper div. Did you try on a DataRange component?

[dillonbailey]

@majapw any updates on this, I've had to adopt @passi246 approach above, but it feels hacky.

The UX rationale behind this is that a user selects a date, then they realise they need to time travel about 10 years, so instead of clicking like a maniac, they select the input and manually type their year. But let's say they mistyped the year or broke the formatting, we need to have a way to tell them about their error and the only real way to do this is through the value of the real input behind datepicker.

Let me know if I can help in anyway with a PR

[tronjs]

currently I am using the id and get the value of the input by that id

<SingleDatePicker
  ...
  id="your_unique_id" // PropTypes.string.isRequired,
/>

[liamzhang40]

Similar issue here. I am trying to implement a feature which auto corrects users' input.
1/01/2019 => 01/01/2019
Right now with @passi246 approach, I could only read the input change but not set its state.

  onChange(e) {
    const { onChange, onKeyDownQuestionMark } = this.props;
    const dateString = e.target.value;

    // In Safari, onKeyDown does not consistently fire ahead of onChange. As a result, we need to
    // special case the `?` key so that it always triggers the appropriate callback, instead of
    // modifying the input value
    if (dateString[dateString.length - 1] === '?') {
      onKeyDownQuestionMark(e);
    } else {
      this.setState({ dateString }, () => onChange(dateString));
    }
  }

The is the onChange function from DateInput.jsx. I am thinking an optional callback prop could be allowed to be passed down which can parse the "dateString" at setState?

  ...
  } else {
    this.setState({ this.props.callback(dateString) }), () => onChange(this.props.callback(dateString)));
  }
  ...

[litchfield]

Obtaining the raw value via the DOM worked for me, but it's hacky. The component should definitely expose the raw value, and allow some control for those who need to validate externally. document.getElementById(this.props.input.name).value

[EliRobinson]

Is there a reason events aren't passed up the chain? In most cases, allowing developers to have access to the event object so they can get data and/or call functions on the event is very helpful and would solve this problem.

onChange(e) {
    const { onChange, onKeyDownQuestionMark } = this.props;
    const dateString = e.target.value;

    // In Safari, onKeyDown does not consistently fire ahead of onChange. As a result, we need to
    // special case the `?` key so that it always triggers the appropriate callback, instead of
    // modifying the input value
    if (dateString[dateString.length - 1] === '?') {
      onKeyDownQuestionMark(e);
    } else {
      this.setState({ dateString }, () => onChange(dateString, e)); <-- would have to do this for backwards compat...
    }
  }

[WPaczula]

Are there any plans to implement it?