Error on date range within Form

[jlorezz]

Would it be possible to use the date range within the form? How would displaying errors etc work with the desired from/to? Getting issues with types on this rn...

  timeWindow: z
    .object({
      from: z.date({
        required_error: 'Zeitfenster Start ist erforderlich.',
      }),
      to: z.date({
        required_error: 'Zeitfenster Ende ist erforderlich.',
      }),
    })
    .optional(),

[jlorezz]

if we have a look at what form.formstate.errors is we can clearly see that there is an error on that object.

[jlorezz]

if we keep the <FormMessage /> simplified like this it won't directly get the error as the error is under to

[jlorezz]

if we keep the <FormMessage /> simplified like this it won't directly get the error as the error is under to

this will just lead to a error message of undefined...

[shadcn]

@florianbress Agree. I think we should update this line and allow anything passed down via children to take over error. This way you can provide/override with your custom error message.

https://github.com/shadcn/ui/blob/3d717f992b26ee72db05b9020e4c951ee1dd8727/apps/www/components/react-hook-form/form.tsx#L148

[jlorezz]

This would be perfect! @shadcn what about an example for the date range in the docs (form)?

[craighicks13]

I've been stumped on this for a bit. I had it working but now I'm getting typescript issues using dateRange within the Form

               <FormField
                    control={form.control}
                    name="dateRange"
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Dates</FormLabel>
                        <FormControl>
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                id="date-range"
                                variant="outline"
                                className={cn(
                                  'w-[280px]',
                                  !field.value && 'text-muted-foreground'
                                )}
                              >
                                <Icons.calendarDays className="mr-2 h-4 w-4" />
                                {field.value?.from ? (
                                  field.value.to ? (
                                    <>
                                      {format(field.value.from, 'LLL dd, y')} -{' '}
                                      {format(field.value.to, 'LLL dd, y')}
                                    </>
                                  ) : (
                                    format(field.value.from, 'LLL dd, y')
                                  )
                                ) : (
                                  <span>Select Date Range</span>
                                )}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent
                              className="w-auto p-0"
                              align="start"
                            >
                              <Calendar
                                mode="range"
                                defaultMonth={undefined}
                                selected={field.value}
                                onSelect={field.onChange}
                                numberOfMonths={2}
                              />
                            </PopoverContent>
                          </Popover>
                        </FormControl>
                        <FormDescription>
                          If first day is selected, click again to select the
                          end date. Click the start date again to reset.
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

Here is my error message:

Type '(event: { from: Date; to: Date; } | { from: Date; to: Date; } | ChangeEvent<Element> | undefined) => void' is not assignable to type 'SelectRangeEventHandler'.
  Types of parameters 'event' and 'range' are incompatible.
    Type 'DateRange | undefined' is not assignable to type '{ from: Date; to: Date; } | { from: Date; to: Date; } | ChangeEvent<Element> | undefined'.
      Type 'DateRange' is not assignable to type '{ from: Date; to: Date; } | { from: Date; to: Date; } | ChangeEvent<Element> | undefined'.
        Type 'DateRange' is not assignable to type '{ from: Date; to: Date; }'.
          Types of property 'from' are incompatible.
            Type 'Date | undefined' is not assignable to type 'Date'.
              Type 'undefined' is not assignable to type 'Date'.ts(2322)

Here is my Zod schema (which is probably the issue):

const dateSchema = (errorMessage: string, field: string) => {
  return z.instanceof(Date).refine(date => !isNaN(date.getTime()), {
    message: `${errorMessage}`,
    path: [field]
  })
}

const singleDaySchema = baseEventSchema.and(
  z.object({
    date: dateSchema('You must select a date', 'date'),
    multiDay: z.literal(false),
    dateRange: z
      .object({
        from: dateSchema('You must select a date range', 'dateRange'),
        to: dateSchema('You must select an end date', 'dateRange')
      })
      .optional()
  })
)

const multiDaySchema = baseEventSchema.and(
  z.object({
    date: dateSchema('You must select a date', 'date').optional(),
    dateRange: z.object({
      from: dateSchema('You must select a date range', 'dateRange'),
      to: dateSchema('You must select an end date', 'dateRange')
    }),
    multiDay: z.literal(true)
  })
)

export const scheduleFormSchema = z.union([singleDaySchema, multiDaySchema])

(I have a checkbox that toggles between single date and date range. )

Been dealing with Zod, React-hook-forms, and shadcn-ui docs but can't seem to find the fix. Anyone have any thoughts?

[DarkAbhi]

Any updates on this?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.