Guide for integrating the shadcn/ui Range Date Picker within a Form

Question

Guide for integrating the shadcn/ui Range Date Picker within a Form

Encountering an issue with using The Range Date Picker within the Form component. Specifically, I am looking to store {from, to} values of the range in an object, however, utilizing an object as a Form field value results in error messages not functioning properly; instead, I receive undefined as an error message.

To resolve this, I have made modifications to the Form Message Component to display errors in a slightly altered format, although I believe this is more of a workaround rather than the correct method.

The code snippet below illustrates the current setup:

const formSchema = z.object({
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
  date: z.object({
    from: z.date(),
    to: z.date(),
  }),
});

function NewEventPage() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      date: {},
    },
  });

  function onError(error) {
    console.log(error);
    /*
    title:
      message: "Title must be at least 2 characters."
      ref: {focus: ƒ, select: ƒ, setCustomValidity: ƒ, reportValidity: ƒ}
      type: "too_small"
    date:
      from: {message: 'Required', type: 'invalid_type', ref: undefined}
      to: {message: 'Required', type: 'invalid_type', ref: undefined}
    */
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit, onError)}
        className="mx-auto mt-12 grid max-w-screen-lg grid-cols-2 gap-x-12 gap-y-8"
      >
        <h1 className="col-span-2 scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
          Create A New event
        </h1>

        <FormField
          control={form.control}
          name="title"
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Event Title</FormLabel>
                <FormControl>
                  <Input placeholder="The best title ever" {...field} />
                </FormControl>
                <FormDescription>Give a name for your event</FormDescription>
                <FormMessage />
              </FormItem>
            );
          }}
        />

        <FormField
      control={form.control}
      name="date"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Date</FormLabel>
          <FormControl>
            [...]
          </FormControl>
          <FormDescription>
            Select the date for when the event will take place
          </FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />

        <Button type="submit" className="col-span-2">
          Submit
        </Button>
      </form>
    </Form>
  );
}

An image showing that the error message appears correctly for the title but shows as undefined for the date can be viewed here: https://i.stack.imgur.com/uo365.png

javascript forms next.js react-hook-form shadcnui

Answer 1

Answer №1

To set a custom error message, define it like this:

  const formSchema = z.object({
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
  date: z.object({
    from: z.date(),
    to: z.date(),
  }).refine(
      (data) => data.from > addDays(new Date(), -1),
      "Start date must be in the future"
    ),
});

Make sure to remove date: {} from DefaultValues to avoid undefined issues.

Update the code as follows:

function NewEventPage() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
    },

Answer 2

To set a custom error message, define it like this:

  const formSchema = z.object({
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
  date: z.object({
    from: z.date(),
    to: z.date(),
  }).refine(
      (data) => data.from > addDays(new Date(), -1),
      "Start date must be in the future"
    ),
});

Make sure to remove date: {} from DefaultValues to avoid undefined issues.

Update the code as follows:

function NewEventPage() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
    },

Answer 3

Answer №2

My approach to solving this issue was as follows:

const DATE_REQUIRED_ERROR = "Date must be entered.";

const formSchema = z.object({
   date: z.object({
       from: z.date().optional(),
       to: z.date().optional(),
   }, {required_error: DATE_REQUIRED_ERROR}).refine((date) => {
       return !!date.from;
   }, DATE_REQUIRED_ERROR),
   comment: z.string().min(1, {message: "Please enter a comment."}),
});

The setup may not be elegant, but it resolved the problem I encountered:

Upon clicking submit without selecting dates in the range picker, an error message displayed "undefined" due to the detection of undefined date.from, triggering the error for the entire date object but not propagating it up correctly. To address this, I made date.from optional to prevent this error.
I then utilized refine((date) => {...}) on the date object itself. This logic checks if date.from is undefined and displays the defined DATE_REQUIRED_ERROR text in the UI. By employing this method, I effectively elevated the error from date.from to the date object for correct display.

But why include

{required_error: DATE_REQUIRED_ERROR}

?

This addition serves a specific purpose:

If you initially select dates in the range picker and subsequently remove them, an unexpected Required error might trigger on the date object. Setting the required_error ensures consistency by displaying the same error message ("Date is required") regardless of whether a value was never selected or previously deleted.

In my case, default values were provided through useForm, although they can be omitted without issues.

 const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
        date: {
            from: undefined,
            to: undefined,
        },
        comment: ''
    },
});

Note that the selected field in the Calendar tag requires adjustment due to the optional nature of date.from. Including the ! operator guarantees its definite assignment.

<Calendar
  initialFocus
  mode="range"
  defaultMonth={field.value.from}
  selected={{from: field.value.from!, to: field.value.to}}
  onSelect={field.onChange}
  numberOfMonths={1}
/>

The above code snippet includes all necessary functionality. Keep in mind that the comment field remains unimplemented in the UI with a placeholder value in the defaults:

(Additional code components would be inserted here)

Answer 4

My approach to solving this issue was as follows:

const DATE_REQUIRED_ERROR = "Date must be entered.";

const formSchema = z.object({
   date: z.object({
       from: z.date().optional(),
       to: z.date().optional(),
   }, {required_error: DATE_REQUIRED_ERROR}).refine((date) => {
       return !!date.from;
   }, DATE_REQUIRED_ERROR),
   comment: z.string().min(1, {message: "Please enter a comment."}),
});

The setup may not be elegant, but it resolved the problem I encountered:

Upon clicking submit without selecting dates in the range picker, an error message displayed "undefined" due to the detection of undefined date.from, triggering the error for the entire date object but not propagating it up correctly. To address this, I made date.from optional to prevent this error.
I then utilized refine((date) => {...}) on the date object itself. This logic checks if date.from is undefined and displays the defined DATE_REQUIRED_ERROR text in the UI. By employing this method, I effectively elevated the error from date.from to the date object for correct display.

But why include

{required_error: DATE_REQUIRED_ERROR}

?

This addition serves a specific purpose:

If you initially select dates in the range picker and subsequently remove them, an unexpected Required error might trigger on the date object. Setting the required_error ensures consistency by displaying the same error message ("Date is required") regardless of whether a value was never selected or previously deleted.

In my case, default values were provided through useForm, although they can be omitted without issues.

 const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
        date: {
            from: undefined,
            to: undefined,
        },
        comment: ''
    },
});

Note that the selected field in the Calendar tag requires adjustment due to the optional nature of date.from. Including the ! operator guarantees its definite assignment.

<Calendar
  initialFocus
  mode="range"
  defaultMonth={field.value.from}
  selected={{from: field.value.from!, to: field.value.to}}
  onSelect={field.onChange}
  numberOfMonths={1}
/>

The above code snippet includes all necessary functionality. Keep in mind that the comment field remains unimplemented in the UI with a placeholder value in the defaults:

(Additional code components would be inserted here)

Answer 5

Answer №3

My solution involved the following approach:

const formSchema = z.object({
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
 date: z
      .object(
        {
          from: z.date(),
          to: z.date().optional(),
        },
        { required_error: "Date is required." },
      )
      .refine((date) => {
        return !!date.to
      }, "End Date is required."),
});

function NewEventPage() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
    },
  });

Answer 6

My solution involved the following approach:

const formSchema = z.object({
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
 date: z
      .object(
        {
          from: z.date(),
          to: z.date().optional(),
        },
        { required_error: "Date is required." },
      )
      .refine((date) => {
        return !!date.to
      }, "End Date is required."),
});

function NewEventPage() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
    },
  });

Guide for integrating the shadcn/ui Range Date Picker within a Form

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to retrieve data in my client component without risking exposing my API key to unauthorized users?

React/Redux - Issue with rest operator functionality in component

Navigate the array and divide the elements into separate values

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Issues with npm installation

How to retrieve an imported tag from an array in React programming

Could someone explain to me why searchQuery.value is coming up as undefined?

The custom validation function in jQuery is not triggering

Angular JS: Implementing a click event binding once Angular has completed rendering the HTML DOM

A guide to effectively converting and parsing a class object that includes Uint8Array elements

Error: When attempting to utilize the Image-Slider, an issue arises with reading the property 'classList' which is undefined

How to resolve: Preventing Ajax - Post request from executing repetitively

Having issues as a Node.js novice with error messages

What is the best way to customize the styles of a reusable component in Angular2?

Reducing div size when clicked - Using JQuery version 1.9

Techniques for implementing a JS script within a useEffect hook in a functional component

Obtain base64 representation of a file using plupload file uploader

``Using backticks to denote HTML syntax - Leveraging Google Charts to create

What is the preferred workflow for client-side modules: (Browserify + npm + gulp) or (RequireJS + Bower + gulp)?

Tips for styling buttons in react-admin with custom CSS