Clement Levesque Clement Levesque -4 years ago 236
React JSX Question

Using react-datepicker with redux-form

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 Source

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,
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download