Using react-datepicker alongside redux-form? - reactjs

Question

I'm trying to use redux-form along with react-datepicker but keep getting the following error:
Warning: Failed prop type: Invalid prop `value` of type `object` supplied to `DatePicker`, expected `string`.
I have my code setup as follows:
renderDatePicker({input, placeholder, defaultValue="01/01/2018", meta: {touched, error} }) {
return (
<div>
<DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
{touched && error && <span>{error}</span>}
</div>
)
};
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.submit.bind(this))}>
<Field name='budgetDateDue' component={this.renderDatePicker} format={(value, name) => value || null} />
<button type='submit'>Submit</button>
</form>
)
}
I can't seem to get around this Warning and I haven't found much online aside from what I have already done.

Answer 1

input is an object, and input.value is a moment object. <DatePicker /> is expecting a string, so you'll need to pass it one. Convert the moment object to a string (and format it however you want).
<DatePicker
{...input}
value = {moment(input.value).format('MM-YYYY')}
dateForm = "MM/DD/YYYY"
selected = {input.value ? moment(input.value) : null}
/>

Answer 2

You can create a custom datepicker and pass props to it
const datePicker = ({ input, label, type, className, selected, meta: { touched, error } }) => (
<div>
<div>
<DatePicker {...input}
selected={selected}
placeholder={label}
type={type}
className={className}
dropdownMode="select"
/>
{touched && error && <span className="error_field">{error}</span>}
</div>
</div>
)
And in redux-form component you can do something like this
<Field
name="date_of_birth"
component={datePicker}
type="text"
selected={this.state.date_of_birth}
onChange={this.handleChange.bind(this)}
className="form-control"
/>

Answer 3

Any of the samples below worked for me, this was my solution:
class DateField extends Component {
render() {
const {
input,
meta: { error, touched },
} = this.props;
return (
<div>
<DatePicker
{...input}
dateForm="MM/DD/YYYY"
selected={input.value && input.value}
onChange={time => {
input.value = time ? time : null;
}}
onBlur={() => input.onBlur(input.value)}
/>
{touched && error && <span className="error-block">{error}
</span>}
</div>
);
}
}
export default DateField;
Then wrap this in a Form element.