How to close the date picker?

[ranjan653]

how to close the date picker

DatePicker selected={this.state.startDate} onChange={this.handleInputChange}/>
DatePicker selected={this.state.EndDate} onChange={this.handleInputChange2}/>

[rafeememon]

What is the issue you are seeing?

[opusrocks]

The issue I see, which might be the same issue, is that when you click into the input field, the datepicker is displayed. But the only way to hide the datepicker is to select a date -- if you click or tab out of the input field, the datepicker remains visible. Firefox 46.0.1

[rafeememon]

Sorry, I'm not seeing this issue; tried Firefox 43 and 47. Are there any console error messages, or can you create a sample app that shows the issue?

[rafeememon]

@opusrocks, are you seeing the issue on the demo site? https://hacker0x01.github.io/react-datepicker/

[opusrocks]

No, I don't see the issue on the demo site. No errors logged to the console.. Hmm, I will have to troubleshoot more

[rafeememon]

Cool; I think it's probably something going on in your app. One thing that comes to mind is that if events are stopped propagating by something, it could be preventing them from reaching the date picker and triggering the close

[filipalacerda]

I believe I have the same problem.
The datepicker does not close when I select a date or on blur. It changes the selected date but the calendar stays open.

import DatePicker from 'react-datepicker'
import moment from 'moment';

constructor(props) {
  super(props);

  this.state = {
    selectedDate: moment()
  };
}

handleChange(date) {
  this.setState({selectedDate: date});
}

render() {
  return (
    <DatePicker
      dateFormat='YYYY/MM/DD'
      selected={this.state.selectedDate}
      onChange={this.handleChange.bind(this)} />
  );
}

And I have several warnings regarding missing props, but according to the docs the only two props I need are selected and onChange.

Warning: Failed propType: Required prop `attachment` was not specified in `TetherComponent`.
Uncaught TypeError: this.props.onFocus is not a function
Warning: Failed propType: Required prop `dateFormat` was not specified in `Calendar`. Check the render method of `DatePicker`.
Tether Error: You must provide an attachment
Uncaught TypeError: this.props.onBlur is not a function

I have the following versions:

"moment": "^2.13.0"
"react": "^15.0.2"
"react-datepicker": "^0.27.0"

[rafeememon]

@lacerda can you try doing a clean install of all of your dependencies (i.e. delete node_modules and npm install)? I suspect something bad happened to them

[filipalacerda]

@rafeememon I did that and I have the same problems.

[filipalacerda]

My bad, I created the project from scratch and all the problems are gone!
Sorry!

[rafeememon]

Awesome! I'm going to close this for lack of other information to go on

[njj]

@lacerda @opusrocks Any luck on figuring out why this was happening? I'm having the same issue but can't seem to determine why.

[filipalacerda]

@njj all I did was a clean install like suggested by @rafeememon and it worked. Have you tried that?