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!
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,
});
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?