Clear react-datepicker on form reset in react-final-form

Question

I'm using react-final-form and react-datepicker. I also have a select for year. Start and end dates should be set to January 1 and December 31 of the default year. When a new year is selected I would like to reset the form, clear selected dates and input values of both datepickers and set them to January 1 and December 31 of the selected year respectively.

Here is the link to my codesandbox https://codesandbox.io/s/react-datepicker-clear-cxlxh.

So far, I have a custom component for react-datepicker which works with react-final-form. Start and end dates are set to January 1 and December 31 of the default year.

DatePicker component:

const DatePickerWrapper = props => {
  const { input, label, minDate, maxDate } = props;
  const [startDate, setStartDate] = useState(input.value);
  return (
    <div>
      <label>{label}</label>
      <DatePicker
        selected={startDate}
        minDate={minDate}
        maxDate={maxDate}
        onChange={value => {
          setStartDate(value);
          props.input.onChange(value);
        }}
        onBlur={props.input.onBlur}
        onFocus={props.input.onFocus}
        value={props.input.value}
      />
    </div>
  );
};

And Field where it is used:

<Field
  name="startDate"
  initialValue={isoDate(minDate(values.year.value))}
  component={DatePickerWrapper}
  minDate={minDate(values.year.value)}
  maxDate={
    values.endDate ? values.endDate : maxDate(values.year.value)
  }
/>

Here is my component for resetting the form:

<Field name="year" subscription={{}}>
  {({ input: { onChange } }) => (
    <OnChange name="year">
      {value => {
        form.reset({
          ...initialValues,
          year: value
        });
      }}
    </OnChange>
  )}
</Field>

So my questions are:

How can I clear react-datepicker and its input value on form reset? There is a clear() function, but I couldn't make it to work.
How can I then set the dates to January 1 and December 31 of the selected year? I've added initialValue for each field and the values of the form are updated. But the inputs' values stay the same.

Sunil Chaudhary Sunil Chaudhary · Accepted Answer · 2019-12-09T12:54:01

You have few issues in the form.

You are giving initial values to you dates twice. Once at the top and then again as the props. This is causing the render to go into infinite loop. Have moved all the form initialization to top in object

const initialValues = {
  year: { value: "2019", label: "2019" },
  startDate: isoDate(minDate("2019")),
  endDate: isoDate(maxDate("2019")),
  amount: ""
};

When you are doing form.reset for the year, at that place you can reset the value for the start date and end date

form.reset({
  ...initialValues,
  year: value,
  startDate: isoDate(minDate(value.value)),
  endDate: isoDate(maxDate(value.value))
});

From the given code, I didn't see any requirement for usestate in datepicker.jsx as it seemed to be getting handled by the form. And so have removed it.

I have updated the code in the Sandbox.

Have a look at it and let me know if any thing is missed or you have any doubts.

Clear react-datepicker on form reset in react-final-form

2 Answers