Using react-datepicker with redux-form

Question

I am trying to use the react-datepicker with redux-form and I am facing an issue. When I select a date from the date picker I get the following error :

Uncaught TypeError: t.isSame is not a function

My code is the following :

// My component that uses the date picker
const renderDateField = (field) => {
  return (
    <div>
      <img src={require('./images/date.png')} className={styles.iconField} />
      <DatePicker {...field.input} placeholderText={field.placeholder} onChange={field.onDateChange} dateFormat='DD/MM/YYYY' selected={field.selected ? field.selected : null} className={styles.inputField} />
    </div>
  );
};

export class MyComponent extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (date) {
    console.log('handle Change', date);
    this.setState({
      startDate: date.format('DD/MM/YYYY')
    });
  }

  render () {
    const { handleSubmit } = this.props;
    console.log('Render global state.startDate', this.state.startDate);
    return (
      <div>
        <form onSubmit={handleSubmit(this.props.filterSubmit)} method='post' action='/tennis/search'>
                ...
                <Field name='date' placeholder='Quand ?' component={renderDateField} onDateChange={this.handleChange} selected={this.state.startDate} />
                ...
        </form>
      </div>)
    ;
  }
}
...
TennisSearchFilters.propTypes = {
  filters: React.PropTypes.shape({
    date: React.PropTypes.object
  }),
  filterSubmit: React.PropTypes.func.isRequired,
  handleSubmit: propTypes.handleSubmit
};
    ...
export default reduxForm({
          form: 'tennisSearch',
          validate: validateTennisSearchForm
        })(TennisSearchFilters);

I think that there is a format error as the input value seems to be updated to a string and then it crashes when comparing a moment to a string. But I am not quite sure of it... therefore I request for your help :)

I checked others posts and questions about it but it did not work properly (maybe I did something wrong however).

Thanks a lot for your help!

Answer 1

Looking at the code sample provided, I assume react-datepicker is using moment under the hood.

onChange method receives moment instance and you are converting this instance to plain string. Then, react-datepicker tries to invoke isSame method on string value, which of course will fail.

Instead of converting updated value to string, store is as received.

this.setState({
    startDate: date,
});

Answer 2

Try in your calendar component::

 onChange ={val => {
   field.onDateChange // Rather read the value from redux-form
   return field.input.onChange(val) // This should dispatch the value to redux-form
  }
}

Not sure why you're setting an additional view state here when using redux-form?