Search code examples
javascriptreactjsreduxredux-form

redux-form and react widgets' calendar - invalid prop value of type String


I want to use react-widgets calendar as input for start date and end date, simplest implementation works:

const TripValidationForm = React.createClass({


FormDatepicker : ({input}) => {
    return (<Calendar {...input} /> );
},
onSubmit : function(formData) {
  const uid = this.props.auth.uid;
    this.props.createTrip(formData, uid);
},
render : function() {
    const {handleSubmit, submitting, feedback} = this.props;
return (
    <div>
        <form onSubmit={handleSubmit(this.onSubmit)} className="form-home">
            <fieldset>
                <Field name="startdate" valueField="value" component={this.FormDatepicker} />
                <Field name="enddate" valueField="value" component={this.FormDatepicker}/>
            </fieldset>
            <p className="error">{feedback.msg}</p>
            <button type="submit" className="btn btn-black" disabled={submitting}>Submit</button>
        </form>
    </div>
);
}
});

However following errors pop in my console, how I can prevent them from showing up?

enter image description here

enter image description here

enter image description here

enter image description here


Solution

  • Found a solution, docs for a calendar widget say

    The current selected date, should be a Date object or null.

    So I used solution from one redux-form git-hub issues for datepicker

    FormDatepicker : ({input}) => {
        const selected = input.value ? new Date(input.value) : null;
        return (<Calendar {...input} value={selected}  /> );
    }