react-final-form - react-dates integration

Question

I cannot integrate react-dates with react-final-form.

If I add an onChange callback to react-dates' component, using change(name, value) function from the form, the name is not saved to the form state (I suppose because the field has to be registered before using change).

Is it possible to register manually a field?

edit: I found a way, adding an hidden Field, but I don't like that...

edit 2: adding a test form:

Please provide the code you tried to expedite a good answer. — Mickers, Feb 07 '18 at 18:02
@Mickers example added, you can see that "A" works with Field or with input with change, "B" is not working, because is not registered inside the state — avalla, Feb 08 '18 at 10:29

Yu-Jhau Peng · Answer 1 · 2019-08-30T06:04:46.590

You must use form from FormRenderProps to do this.

「form.change」

<Form
  onSubmit={onSubmit}
  initialValues={{ a: "a" }}
  render={({
    form, // Focus here and removed 「change」
    handleSubmit,
    reset,
    submitting,
    pristine,
    values
  }) => (
    <form onSubmit={handleSubmit}>
      <div>
        <label>A Field</label>
        <Field name="a" component="input" type="text" />
      </div>
      <div>
        <label>A not Field</label>
        <input
          name="a"
          type="text"
          onChange={event => {
            console.log("changing A to", event.target.value);
            form.change("a", event.target.value); // Use form.change instead of change
          }}
        />
      </div>
      <div>
        <label>B not Field</label>
        <input
          name="b"
          type="text"
          onChange={event => {
            console.log("changing b to", event.target.value);
            form.change("b", event.target.value); // Use form.change instead of change
          }}
        />
      </div>
      <div className="buttons">
        <button type="submit" disabled={submitting || pristine}>
          Submit
        </button>
        <button
          type="button"
          onClick={reset}
          disabled={submitting || pristine}
        >
          Reset
        </button>
      </div>
      <pre>{JSON.stringify(values, 0, 2)}</pre>
    </form>
  )}
/>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) — Lakmi, Aug 30 '19 at 04:23

Evgeny Timoshenko · Answer 2 · 2018-05-05T07:44:08.373

-1

You can wrap it inside of Field to make final-form's state aware of the b field:

<Field
  name="b"
  render={() => {
    return (
      <input
        type="text"
        onChange={event => {
          console.log("changing b to", event.target.value);
          change("b", event.target.value);
        }}
      />
    );
  }}
/>

in the case above you don't need to specify special onChange handler:

<Field
  name="b"
  render={({ input }) => {
    return <input type="text" {...input} />;
  }}
/>

or even

<Field name="b" component="input" />

edited May 05 '18 at 07:44

answered Apr 24 '18 at 15:15

Evgeny Timoshenko

3,119
5
33
53

Isn't the change event available on the form, not the field? When I tried this I got an undefined – rockyroadster555 May 04 '18 at 01:48
@rockyroadster555 change event is on the `input` but field – Evgeny Timoshenko May 05 '18 at 07:21

score -1 · Answer 3 · answered Apr 04 '21 at 06:37

This worked for me:

import { SingleDatePicker } from 'react-dates'


// set a state
const [ date, setDate ] = useState(null);


// inside your render inside the react-final-form component
<Field name="date">
    {({ input, meta }) => (
        <>
            <SingleDatePicker
                readOnly
                onOutsideClick={true}
                numberOfMonths={1}
                focused={focused}
                date={date}
                onDateChange={value => {
                    // you need to set the value to a formatted date
                    // because react-dates returns a moment object as the value
                    input.onChange(value.format('YYYY-MM-DD'))
                    setDate(value);
                }}
                onFocusChange={({ focused }) => {
                    setFocused(focused);
                }}
            />
        </>
    )}
</Field>

react-final-form - react-dates integration

3 Answers3