Input component with type="date" and zod validation date type issue

[prudhvi-mallavarapu]

I'm trying to validate Date field, and using <Input type="date" /> instead of Day picker.

My zod schema is const schema = z.object({ followup: coerce.date() });

But getting typescript error on Input component as Type '{ onChange: (...event: any[]) => void; onBlur: Noop; value: Date; disabled?: boolean | undefined; name: "followup"; ref: RefCallBack; type: "date"; }' is not assignable to type 'InputProps'. Types of property 'value' are incompatible. Type 'Date' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'Date' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 20 more.ts(2322).

I tried followup: z.string().transform((value) => new Date(value)),

But still the type errors for Input component not resolved. Only followup:z.string() is working. Any suggestions please.

[alamenai]

Would you share some code to reproduce and debug the issue?

[R1NEJ0]

Got same error.

Schema const inputSchema = z.object({ date: z.coerce.date() }); Default values: const form = useForm<z.infer<typeof Transaction>>({ resolver: zodResolver(inputSchema), defaultValues: { date: new Date() }, })

FormField <FormField control={form.control} name="date" render={({ field }) => ( <FormItem> <FormLabel>Fecha</FormLabel> <FormControl> <Input type="date" {...field} /> </FormControl> <FormDescription> Fecha de la transacción </FormDescription> <FormMessage /> </FormItem> )} />

I've tryed using default values and getting format in string, with coerce and safeparse.

Meanwhile I'm using datepicker or simple input tag (not component one).

[CesarQD98]

The following snippet comes inside the default Form anatomy in the Docs.

<FormField
  control={form.control}
  name='dob'
  render={({ field }) => (
    <FormItem>
      <FormLabel>Fecha de nacimiento</FormLabel>
      <FormControl>
        <Input type='date' {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Using <Input type="date" /> gives the following error:

Type '{ onChange: (...event: any[]) => void; onBlur: Noop; value: Date; disabled?: boolean | undefined; name: "dob"; ref: RefCallBack; type: "date"; }' is not assignable to type 'InputProps'.
Types of property 'value' are incompatible.
Type 'Date' is not assignable to type 'string | number | readonly string[] | undefined'.
Type 'Date' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 26 more.

[kokecar11]

I'm getting the same error, does anyone have a workaround, because it won't even let me do the build.

[rafael-jordao]

This worked for me:

<FormField
            control={form.control}
            name="data"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    type="date"
                    placeholder="Data de nascimento"
                    {...field}
                    value={
                      field.value instanceof Date
                        ? field.value.toISOString().split('T')[0]
                        : field.value
                    }
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

[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.