0

I have a formsy form with a bunch of Inputs. I can see the value of those inputs in the onValidSubmit function. One example of such an input is the following:

<Input
    name="myStartDate"
    id="myStartDate"
    value=""
    label="Start Date (YYYYMM)"
    type="tel"
    validations={{
        matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
    }}
    validationErrors={{
        matchRegexp: 'Enter the year and month (YYYYMM).'
    }}
    placeholder="YYYYMM"
    required
/>

In the formsy form I have:

onValidSubmit={this.onValidSubmit}

The function only logs the form data:

onValidSubmit(formData){
    console.log(formData);
}

I want to change this input to be a react-datepicker component (DatePicker), however, after I make the necessary changes to make the DatePicker work, the "formData" object in the onValidSubmit no longer contains the value for "myStartDate". What should I do to make this work?

My DatePicker component looks like this: (it's basically the same as the Input but with some additional stuff)

<DatePicker
    name="myStartDate"
    id="myStartDate"
    value=""
    label="Start Date (YYYYMM)"
    type="tel"
    validations={{
        matchRegexp: /^(19|20)\d\d(0[1-9]|1[012])$/
    }}
    validationErrors={{
        matchRegexp: 'Enter the year and month (YYYYMM).'
    }}
    placeholder="YYYYMM"
    required
    placeholderText="ÅÅÅÅMM"
    dateFormat="YYYYMM"
    className="form-control"
    selected={this.state.myStartDate}
    onChange={this.myStartDate}
    isClearable={true}
/>

I know that DatePicker handles dates using the moment.js and I will handle this change accordingly, however, as I said before, "myStartDate" no longer shows up in the "formData" object passed to "onValidSubmit". What gives?

Thank you very much for your help!

0 Answers0