Help with implementing DateInput on Form

[smd]

Hi, 

My form is going to have controlled DatePicker component. However, I could not figure out why when I defined the onChange function on the DatePicker, the form submission excluded its value. 

https://codesandbox.io/p/sandbox/cool-hofstadter-2vj2s3?file=%2Fapp%2Fapp.jsx%3A18%2C7

From the code above, Test Date 1 and Test Date 2 components are almost the same, except, Test Date 2 component has line 63, which I set its 'value' and defined 'onChange' function separately. However, form submission will not recognize Test Date 2 value. 

From pictures above, if removing 'value' and 'onChange' on line 63, you will see Result on the left, otherwise, you will receive result on the right

[Vessy]

Hi,

The issue you're experiencing with the Test Date 2 component is related to the fact when a component is used in controlled mode it uses separate state therefore the form is not aware of its changes.

To ensure that the form submission includes the value of the second DatePicker,  you need to update the form state whenever the date changes. Here's how you can modify your code:

• https://codesandbox.io/p/sandbox/ecstatic-artem-p6rnv9?file=%2Fapp%2Fapp.jsx%3A52%2C45 

              <Field
                name="testDate2"
                component={(props) => {
                  return (
                    <DatePicker
                      value={dateValue2} // Controlled by state
                      onChange={(event) => {
                        setDateValue2(event.value); // Update local state
                        props.onChange({ value: event.value }); // Explicitly update Form state
                      }}
                    />
                  );
                }}
              />

I hope this helps.

Regards,
Vessy
Progress Telerik

[smd]

This is great. Thank you, Vessy. I had been puzzled by this for a couple days, even redesigning my form for a workaround but it always came back to this. 

[Vessy]

You are most welcome, I am glad my suggestion was helpful :)