Do you mean you already have a date picker component that you want react-final-form to be able to access that component's state? If that is the case, have you considered using the render-props version of the Field component?

In your form that would look like this:

<Field name="datePickerField">
  {({ input }) => (
      onChange={date => input.onChange(date)}

and then inside the DatePickerComponent - where you handle setting state for the selected date, you would also call props.onChange(date).


Ummmmm, I'm going to assume you wan't to set an initial value that the end user can change. Please let me know if this is not the case.

If you wan't to force a value, don't use a field. React-final-form maintains state so you don't have to.

To set an initial value, use initialValues property in the Form control.

      initialValues={{ field1: "2019-02-02" }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
            <label>Feild One</label>
            <Field name="field1" component="input" type="date" />

Edit 🏁 React Final Form - Simple Example

Related Query

More Query from same tag