[Bug]: Auto Form toDate is not a function when form schema has default value

[LeclechM]

Reproduction

https://stackblitz.com/edit/nuxt-vue-3-4-beta-twkyrr?file=src%2Fpages%2Fhome%2FHomePage.vue

Describe the bug

In documentation:

If you want to set default value of date, convert it to Date first using new Date(val).

An error occurs during {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}

because slotProps.componentField.modelValue is of type string and not a DateValue like expected by Calendar component.

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 2.89 GB / 15.30 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.10.0 - ~/.local/share/pnpm/pnpm
    bun: 1.1.27 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.58

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[Keiishu]

That's because radix-vue's Date Picker uses @internationalized/date only. I'm facing the same issue. I can't set initial values because of that, and Zod doesn't support such objects.

[Us3r-gitHub]

That's because radix-vue's Date Picker uses @internationalized/date only. I'm facing the same issue. I can't set initial values because of that, and Zod doesn't support such objects.

I'm experiencing the same issue now. Is there no solution for this? Even though the documentation says, If you want to set the default value of a date, convert it to a Date first using new Date(val), I'm still getting an error.

[Us3r-gitHub]

Since the component relies on DateValue from @internationalized/date, I've implemented a temporary solution to address this issue. Thanks for @Keiishu

Previous (not work for validating form)

```TS import { getLocalTimeZone, parseAbsolute, type DateValue } from "@internationalized/date"; const schema = z.object({ date: z.coerce.date() }); const form = useForm({ initialValues: { date: parseAbsolute(new Date().toISOString(), getLocalTimeZone()) as DateValue as unknown as Date, // casting to Date for Zod compatibility }, }); ```

Revised

import { getLocalTimeZone, parseAbsolute } from "@internationalized/date";

const schema = z.object({
  date: z
    .any() // for all possibilities value (in case: DateValue type from @internationalized/date)
     .refine((val) => val, 'Invalid Date'), // Ensure the 'date' field is required
});

const form = useForm({
  validationSchema: toTypedSchema(schema), // for validation
  initialValues: {
    date: parseAbsolute(new Date().toISOString(), getLocalTimeZone()),
  },
});

And in the template, define the date input like this:

<template #date="slotProps">
  <AutoFormFieldDate v-bind="slotProps" required />
</template>

Full Code (Nuxt)

[Repo](https://github.com/Us3r-gitHub/Playground-Nuxt/blob/auto_form-date_picker/app/pages/index.vue) ```Vue ```