Using react-datepicker with reductive form

I am trying to use react-datepicker with redux form and I am facing problem. 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 as follows:

// 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 there is a format error as the input value seems to be updated to a string and then it crashes when collecting moment in string. But I'm not really sure about this ... so I ask you for help :)

I checked other posts and questions about this, but it didn't work as expected (I may have done something wrong).

Many thanks for your help!

+3


source to share


2 answers


After looking at the sample code, I assume I'm react-datepicker

using it moment

under the hood.

onChange

the method gets an instance moment

and you convert that instance to a regular string. Then it react-datepicker

tries to call the method isSame

on the string value, which of course won't work.



Instead of converting the updated value to a string, the save will be obtained.

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

      

+1


source


Try in the 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 are setting additional view state when using the reductive form?

+1


source







All Articles