React-datepicker: There is no way to clear date filters other than isClearable prop.

Created on 1 Mar 2017  路  9Comments  路  Source: Hacker0x01/react-datepicker

I have successfully integrated date picker in my app.
I have used it as for date to and date from it is working good. However I have one CTA on click of that CTA I want to clear both the date fields, but there no ways to do this. If anyone can suggest how to clear input fields then it will be helpful for us.

Most helpful comment

Have you tried passing selected={null}?

All 9 comments

Same issue here. How can I clear the date picker without explicitly using isClearable?

Have you tried passing selected={null}?

Passing null does seem to work sort of, but it also seems not too hard to end up with an 'Invalid date' - which is what I got when I pulled down https://github.com/Hacker0x01/react-datepicker/commit/40c7ee79754c979e97511c1c107749df5ad7e619.

Ran yarn start, and then tried clearing the Hero Example and hitting enter, I get NaN. And sometimes I also see Invalid date.

Maybe because moment(null) returns a moment with _i: NaN. Also think it might have something to do with https://github.com/Hacker0x01/react-datepicker/blob/b1decffb4bbeabed8b0313050f0f57acc49e6208/src/datepicker.jsx#L130 and https://github.com/Hacker0x01/react-datepicker/blob/b1decffb4bbeabed8b0313050f0f57acc49e6208/src/datepicker.jsx#L275

In that line 274, it looks like moment can be called with moment if the boundedPreselection is not defined - moment(momentObj) is not valid. I'll look at maybe fixing it...

I think you should return undefined like this

<DatePicker
  selected={this.state.myDate? moment(this.state.myDate) : undefined}
  onChange={date => {
    this.setState({
       myDate: date ? date.toISOString() : undefined
    })
  }}
/>

while passing selected={null} kind of works for me, when I press ENTER then some random date (previously selected value / today by default) will replace whatever is in the input value (e.g. when manually clearing the input field and pressing ENTER instead of clicking on the X button)

even with disabledKeyboardNavigation :(

edit: actually, pressing ENTER will always replace selected with the random value, not only for null in 0.53.0 馃樋

1.) not possible to overwrite with a customInput={<input onKeyDown=...} because it's cloned in https://github.com/Hacker0x01/react-datepicker/blob/3ce7f9b1e237efb87ef8ce658db3945ec938b6c2/src/datepicker.jsx#L407 so the library onKeyDown takes precedence over custom props :(

2.) and this is the place that inserts "today" on ENTER - https://github.com/Hacker0x01/react-datepicker/blob/3ce7f9b1e237efb87ef8ce658db3945ec938b6c2/src/datepicker.jsx#L289

I will create a PR to check for disabledKeyboardNavigation to solve 2., ignoring 1. for now

This project is not interested in my collaboration. The only reply to my PR was that after 2 months of no one merging it, it is no longer possible to merge it due to a conflict (the original file no longer exists).

So I closed the PR because I did not get any advice how to address that problem in any other way.

Then @rafeememon was so unsure about why I had to have such an attitude that he or she "locked and limited conversation to collaborators".

So I reply here that it was obvious that a PR with conflicts could not be merged - but no one indicated _what will the core team do about it_. Did I look like someone who would contribute to the PR for next 5 years until an official "collaborator" privilege core team member makes their appearance and merge / comment in the PR?

If you don't have time to accept or comment on contributions from previously-enthusiastic people, then you should have said at any time between September 18 and November 8:

Thank you for your effort, but unfortunately we do not have time to review contributions from new people. This PR cannot be merged at the moment, but if we find some time in next 6 months, we will get back to you. If you still want to contribute, code review of other PRs could really help us improve quality of contributions so they can be reviewed and merged by the core team faster.

There is no indication in _readme.md_ nor _contribution.md_ that this is a project hostile to newcomers, so I assumed that my contribution would be welcome and I was reasonably frustrated that it wasn't welcome :(

@Aprillion -- I'm sorry that this is the impression that you get. As is the case here and in many open source projects, the collaborators and contributors (you and I included) contribute to issues, pull requests, and discussions in their spare time, and as you can tell from the number of open issues and PRs, we haven't had much spare time as of late. While we would love to help every user of the component, it is simply not possible, and taking a confrontational attitude towards us, both in #996 and here, isn't going to get you much sympathy.

This project is not interested in my collaboration. The only reply to my PR was that after 2 months of no one merging it, it is no longer possible to merge it due to a conflict (the original file no longer exists).

So I closed the PR because I did not get any advice how to address that problem in any other way.

Then @rafeememon was so unsure about why I had to have such an attitude that he or she "locked and limited conversation to collaborators".

So I reply here that it was obvious that a PR with conflicts could not be merged - but no one indicated what will the core team do about it. Did I look like someone who would contribute to the PR for next 5 years until an official "collaborator" privilege core team member makes their appearance and merge / comment in the PR?

If you don't have time to accept or comment on contributions from previously-enthusiastic people, then you should have said at any time between September 18 and November 8:

Thank you for your effort, but unfortunately we do not have time to review contributions from new people. This PR cannot be merged at the moment, but if we find some time in next 6 months, we will get back to you. If you still want to contribute, code review of other PRs could really help us improve quality of contributions so they can be reviewed and merged by the core team faster.

There is no indication in readme.md nor contribution.md that this is a project hostile to newcomers, so I assumed that my contribution would be welcome and I was reasonably frustrated that it wasn't welcome :(

Use this code, where you imported DatePicker component. This will clear input value:

handleChange({ startDate, endDate }) {

        if(startDate===undefined)
        {
            startDate = startDate || this.state.startDate
        }
        if(endDate===undefined)
        {
            endDate = endDate || this.state.endDate

            if (startDate && startDate.isAfter(endDate)) {
                endDate = startDate
            }
        }
        this.setState({ startDate, endDate })
    }
Was this page helpful?
0 / 5 - 0 ratings