Date Picker

Hi all I try to do a create event page which help me to create an event and add it to the database I searched on google and I did not find any useful example to get a data inpute with time and send the value using useForm using register anyone can help ?
9 Replies
kapa.ai
kapa.ai15mo ago
Hey @Deleted User! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- It looks like you're trying to create a form with a date picker and use the useForm hook to register the value and submit it to the database. Fortunately, Refine has a great example of how to do this. You can find the source code here (https://github.com/refinedev/refine/tree/master/examples/form-react-hook-form-use-form). To use the date picker, you'll need to import the DatePicker component from the @pankod/refine-react-hook-form package. Then, you can use the register method to register the value and the handleSubmit method to submit the form. Here's an example of how to do this:
import { DatePicker, useForm } from "@pankod/refine-react-hook-form";

export const PostCreate: React.FC = () => {
const {
control,
handleSubmit,
register,
formState: { errors },
} = useForm();

return (
<form onSubmit={handleSubmit(onFinish)}>
<div className="mb-6">
<label
htmlFor="date"
className="mb-2 block text-sm font-medium"
>
Date
</label>
<DatePicker
{...register("date", { required: true })}
id="date"
className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm"
/>
{errors.date && (
<p className="mt-1 text-sm text-red-600">
<span className="font-medium">Oops!</span> This
field is required
</p>
)}
</div>
</form>
);
};
import { DatePicker, useForm } from "@pankod/refine-react-hook-form";

export const PostCreate: React.FC = () => {
const {
control,
handleSubmit,
register,
formState: { errors },
} = useForm();

return (
<form onSubmit={handleSubmit(onFinish)}>
<div className="mb-6">
<label
htmlFor="date"
className="mb-2 block text-sm font-medium"
>
Date
</label>
<DatePicker
{...register("date", { required: true })}
id="date"
className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm"
/>
{errors.date && (
<p className="mt-1 text-sm text-red-600">
<span className="font-medium">Oops!</span> This
field is required
</p>
)}
</div>
</form>
);
};
For more information, you can check out the Refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm) on the useForm hook. ----------------------
useForm | refine
The @pankod/refine-react-hook-form adapter allows you to integrate the React Hook Form library with refine, enabling you to manage your forms in a headless manner. This adapter supports all of the features of both React Hook Form and refine's useForm hook, and you can use any of the React Hook Form examples as-is by copying and pasting them into...
kapa.ai
kapa.ai15mo ago
<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below
metropolitan-bronze
metropolitan-bronze15mo ago
@kapa.ai I have an error when I import the DatePicker the error:
'DatePicker' is declared but its value is never read.ts(6133)
Module '"@pankod/refine-react-hook-form"' has no exported member 'DatePicker'.ts(2305)
'DatePicker' is declared but its value is never read.ts(6133)
Module '"@pankod/refine-react-hook-form"' has no exported member 'DatePicker'.ts(2305)
flat-fuchsia
flat-fuchsia15mo ago
Hello @Deleted User which UI framework are you using? DatePicker isn't exported from react-hook-form. You should import it from respective UI library, eg import { DatePicker } from "@pankod/refine-antd"
metropolitan-bronze
metropolitan-bronze15mo ago
hi @batuhanw I got error after I added this
'DatePicker' is declared but its value is never read.ts(6133)
Cannot find module '@pankod/refine-antd' or its corresponding type declarations.ts(2307)
'DatePicker' is declared but its value is never read.ts(6133)
Cannot find module '@pankod/refine-antd' or its corresponding type declarations.ts(2307)
how I can know the UI framework ? I use MUI
flat-fuchsia
flat-fuchsia15mo ago
import { DatePicker } from "pandkod/refine-mui"
metropolitan-bronze
metropolitan-bronze15mo ago
not work even after adding the @
flat-fuchsia
flat-fuchsia15mo ago
Please go through tutorial, it will help you https://refine.dev/docs/tutorial/introduction/index/