"Warning: Failed prop type" When using react-datepikcer with redux-form

Question

I'm using "react-datepicker" alongside "redux-form", and I keep getting this error in the console ...

Warning: Failed prop type: Invalid prop `selected` of type `String` supplied to `DatePicker`, expected instance of `Date`.

The new version of "react-datepicker" is not using "moment()" so the solutions I found doesn't work.

Here's how my form component looks like ...

import React, { Component } from "react";
import { compose } from "redux";
import { connect } from "react-redux";
import { reduxForm, Field } from "redux-form";
import DateInput from "../../form/DateInput";
import { subDays } from "date-fns";
import {
    combineValidators,
    isRequired
} from "revalidate";

class SignUpForm extends Component {
    onFormSubmit = values => {
        console.log(values);
    };

    render() {
        const { invalid, submitting, pristine } = this.props;
        return (
            <form onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
                <Field
                    name="birthdate"
                    component={DateInput}
                    label="Birth Date"
                    dateFormat="yyyy-MM-dd"
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    maxDate={subDays(new Date(), 366 * 18)}
                    showDisabledMonthNavigation
                />

                <Button
                    disabled={invalid || submitting || pristine}
                    type="submit"
                    size="big"
                    theme="black"
                >
                    Sign In
                </Button>
            </form>
        );
    }
}

const validate = combineValidators({
    birthdate: isRequired({ message: "Please choose your date of birth." })
});

export default compose(
    connect(
        null,
        actions
    ),
    reduxForm({ form: "signupForm", enableReinitialize: true, validate })
)(SignUpForm);

And here's how the "DateInput" component looks like ...

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DateInput = ({
    input: { value, onChange, ...restInput },
    label,
    meta: { touched, error, dirty },
    ...props
}) => {
    let groupClasses = touched && !!error ? "input-group error" : "input-group";

    return (
        <div className={groupClasses}>
            <DatePicker
                {...props}
                selected={value ? value : null}
                onChange={onChange}
                {...restInput}
            />
            {touched && !!error && <span className="error">{error}</span>}
        </div>
    );
};

export default DateInput;

Any help would be appreciated.

You could try destructuring `selected` from the `input` prop as well, and give that to `DatePicker` as `selected={new Date(selected)}` and see if that works. — Tholle, Feb 15 '19 at 17:49
I think you gotta `parse` the redux-form component output: `parse={(dateString) => new Date(dateString)}` — enapupe, Feb 15 '19 at 17:50
Have you tried adding the `placeHolderText` property? `placeholderText="MM/DD/YYYY"` — ageoff, Feb 15 '19 at 18:09
@ageoff That has the same effect as "Samuel Vaillant" answer, which is when I console the value of the form sometimes the date comes like this "birthdate: Tue Mar 06 1984 00:00:00 GMT+0200 (Eastern European Standard Time) {}" and when I choose another date it comes like this "birthdate: "1984-03-09", which is weird. — Ruby, Feb 15 '19 at 18:12

score 1 · Answer 1 · answered Feb 15 '19 at 17:51

1

It looks like the value provided to the selected prop is not the correct format. The value is probably a string provided by redux-form. You can create a date out of a string if the format is correct with: new Date(value).

selected={value ? new Date(value) : null}

You can also use the parse function provided by redux-form.

answered Feb 15 '19 at 17:51

Samuel Vaillant

3,667
1
14
21

I did try this solution before asking, but when I console the value of the form sometimes the date comes like this "birthdate: Tue Mar 06 1984 00:00:00 GMT+0200 (Eastern European Standard Time) {}" and when I choose another date it comes like this "birthdate: "1984-03-09", which is weird. – Ruby Feb 15 '19 at 18:00

"Warning: Failed prop type" When using react-datepikcer with redux-form

1 Answers1