correct-apricot•2y ago

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•2y 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•2y 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•2y ago

<@1073419683014922323> kapa.ai is still learning and improving, please let us how it did by reacting below

correct-apricot•2y 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)

absent-sapphire•2y 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"

correct-apricot•2y 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

absent-sapphire•2y ago

import { DatePicker } from "pandkod/refine-mui"

correct-apricot•2y ago

not work even after adding the @

absent-sapphire•2y ago

Please go through tutorial, it will help you https://refine.dev/docs/tutorial/introduction/index/

1. Build your first refine app | refine

About this Tutorial