I'm using the react-datepicker inside the react-final-form. I'm using a template with multiple steps https://codesandbox.io/s/km2n35kq3v?file=/index.js. The problem is that I'm not able to integrate the datepicker inside the component. My Code looks like this:
return (
<Field name={props.name} parse={() => true}>
{props => (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
selected={startDate}
dateFormat="P"
openToDate={new Date()}
minDate={new Date()}
disabledKeyboardNavigation
name={props.name}
value={startDate}
onChange={(date) => setStartDate(date)}
/>
)}
</Field>
);
Does anyone knows how I can use it so the data gets passed at the end of the form?
Best regards
I used the wizard form example you sent and added DatePicker similar to yours. Check the wizard example
But basically, I changed your
onChange
method to actually usereact-final-form
field
props. Now, it usesthis.props.input.onChange
, which updates the final form state value, and usedthis.props.input.value
to set the selected state (you can then load initial values into final form):Hopefully this helps you.