Rank 2
Iron
Iron
Iron
Is there an elegant way of integrating dateinput with formik?
My code below works however it's tedious (not DRY :( ) to implement. It will require a state for every date input. I hope you don't mind sharing your code. Thanks
const ClaimsForm = () => {
const [value, setValue] = React.useState<Date | null>(new Date());
const changeDate = (event: DateInputChangeEvent) => {
setValue(event.value);
};
const initialValues = {
decisionDate: value
};
const handleSubmit = (values: any) => {
console.log(values)
}
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize={true}
>
{({ isSubmitting }) => (
<Form>
<DateInput name='decisionDate' value={value} onChange={changeDate} />
</Form>
)}
)
}
1 Answer, 1 is accepted
Hello,
This is the approach we recommend when using our components with Formik:
https://stackblitz.com/edit/react-cgbtoa-ckj763?file=app%2Fmain.jsx
The developer may have one general KendoReactDatePickerField component and reuse it in multiple forms.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 2
Iron
Iron
Iron
Thanks for your response stefan.
I'm still struggling implementing formik using kendo ui components, specifically Autocomplete.
It seems that formik "onChange" event when autocomplete sets the value of an input box. Can you share with me a snippet on how integrate these 2 components? TIA!
Hello,
I used the same approach and added an AutomComlete:
https://stackblitz.com/edit/react-cgbtoa-pu8tl4?file=app%2Fmain.jsx
If there is an issue, please share an example with the issue and I will take a look at it.
Rank 2
Iron
Iron
Iron
Hi Stefan,
Not sure if this is a bug, in the example you've given above, TextArea changes are not saved in formik values..
to replicate:
1. First, add submit button.
2. Submit the form without touching the fields. A popup appears with all the form values.
3. Now, update textarea (type whatever you want) then submit again. The popup still appears but the TextArea is value is gone.
I can confirm that this is an issue with the current version of the KendoReact TextArea.
I have logged this for fixing, and the status can be monitored here:
https://github.com/telerik/kendo-react/issues/1205
Currently, there is no workaround available, if one is found it will be added to the issue.
Additionally, I have added some Telerik points to your account for bringing this to our attention.
Apologies for the inconvenience this may have caused you.
Rank 2
Iron
Iron
Iron
Thanks for letting me know.
Just in case anyone is looking for a workaround, check the code below. It's using formik's field.
<Field as="textarea" row='4' name="notes" placeholder="Textarea" className='form-control mb-3'/>
<ErrorMessage name="notes" render={ msg =>
<small className="text-warning">{msg}</small>
} />