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 (
<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} />

export class MyComponent extends React.Component {

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

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

render () {
const { handleSubmit } = this.props;
console.log('Render global state.startDate', this.state.startDate);
return (
<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} />
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

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.

    startDate: date,
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download