react-datepicker with react-final-form - reactjs

Question

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

Answer 1

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 use react-final-form field props. Now, it uses this.props.input.onChange, which updates the final form state value, and used this.props.input.value to set the selected state (you can then load initial values into final form):
const RenderDatePicker = ({ name, input, input: { value, onChange } }) => {
return (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
dateFormat="P"
selected={value && isValid(value) ? toDate(value) : null} // needs to be checked if it is valid date
disabledKeyboardNavigation
name={name}
onChange={(date) => {
// On Change, you should use final-form Field Input prop to change the value
if (isValid(date)) {
input.onChange(format(new Date(date), "dd-MM-yyyy"));
} else {
input.onChange(null);
}
}}
/>
);
};
<div>
<label>Date of birth</label>
<Field
name="dateOfBirth"
component={RenderDatePicker}
validate={required}
/>
<Error name="dateOfBirth" />
</div>
Hopefully this helps you.