带有反应最终形式的反应日期选择器

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.