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!
source to share
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,
});
source to share