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!