Datepicker inside a modal

Hi, I have a datepicker inside a modal. Whenever I clicked on the date, the modal got closed too. Is there a way to avoid this? My code looks like this

import React from 'react';
import moment from 'moment';
import { change } from 'redux-form';
import DatePicker from 'react-datepicker';

class ReservationDetailsCheckinContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  handleInputChange(e) {
    console.log(e);
  }

  render() {
    return (
      <div className="pull-left" style={{
        width: '65%'
      }}>
        <label>
          Check-in Date
        </label>
        <div>
          <DatePicker selected={this.state.startDate} onChange={this.handleInputChange}/>
        </div>
      </div>
    );
  }
}

export default ReservationDetailsCheckinContainer;

[ishake]

I am also having this issue on the time picker portion of this.

[amakhrov]

Actually, passing the event into onChange wouldn’t solve the issue completely. A user can click on the calendar without selecting a date (e.g. navigating between months). And in the scenario above it will as well close the modal.

An alternative suggestion is to introduce a new property: stopPropagationOnClick: PropTypes.bool. If this property is true, the component will run e.stopPropagation() on all mouse clicks inside the calendar.

@martijnrusschen would you consider a PR with the proposed change?