React-dates: programmatically clear dates

[oldo]

I'd like to clear the dates from any of the pickers programmatically. Basically I just want exactly the same functionality as the clear dates button, but to trigger it via code. Is this possible?

[majapw]

Just set date or startDate and endDate to null in your containing element. They are props passed into the SingleDatePicker or the DateRangePicker so you can set them to whatever you want.

[oldo]

Too easy! :-D
Thanks :-)

[edward93]

When you enter incorrect day manually (typing the date e.g. start date - 01/01/2017 and end date 01/01/2015) It actually doesn't update the state and it remains null. So in this case that incorrect value stays no matter what at least I couldn't find a solution or workaround for it. Any advise?

[kishoremvrs]

i too have the same issue as mentioned by @edward93

Can there be a solution? or should i just make the input field read only.?

[Andrevoks]

same problem like @edward93, guys did you find any solution?

[alwsBgood]

More comments, more chances to find a solution?) Have the same problem, help wanted.

[lferreira457]

Had a similar issue with single datepickers not being able to clear invalid dates/gibberish entered manually by a user.
For now, managed to check/clear this manually via a promise after date pickers change focus:

handleFocusChange = ({ focused }) => {
  this.setState({ focused }, () => { this.clearInvalidInput() })
}

clearInvalidInput = () => {
  if (this.props.date) return      // valid date selected
  document.querySelector(`input[id='${this.props.id}']`).value = ''
}

It would still be better if we were able to programmatically clear all input values (not just valid dates)

[thian4]

having the same issue

https://github.com/airbnb/react-dates/issues/1548

[bdrazen]

This should be reopened. The issue is still outstanding as far as I can make out. Setting the date to null doesn't seem to affect the underlying input element value.

Seems a result of DateInput falling back to its own managed value (dateString):
https://github.com/airbnb/react-dates/blob/5584f822fdcc3fa266deff62756ac887b4c0d2af/src/components/DateInput.jsx#L170-L173
https://github.com/airbnb/react-dates/blob/5584f822fdcc3fa266deff62756ac887b4c0d2af/src/components/DateInput.jsx#L195