UFormGroup don't display error form v-calendar DatePicker

[EvanSchleret]

Environment

• Operating System: Darwin
• Node Version: v18.19.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: app, auth, components, devtools, experimental, extends, modules, dayjs, googleFonts, primevue, runtimeConfig, turnstile, ui
• Runtime Modules: @nuxt/ui@2.15.2, nuxt-primevue@0.3.1, @nuxtjs/tailwindcss@6.12.0, @nuxtjs/google-fonts@3.2.0, @nuxt/image@1.6.0, nuxt-icon@0.6.10, dayjs-nuxt@2.1.9, @vueuse/nuxt@10.9.0, @nuxtjs/fontaine@0.4.1, @vueuse/nuxt@10.9.0, @sidebase/nuxt-auth@0.6.4, @nuxtjs/turnstile@0.6.3
• Build Modules: -

Version

v2.14.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-jbdest?file=app.vue

Description

I tried for a while yesterday to use the DatePicker component of V-Calendar, highlighted in the Nuxt UI doc (https://ui.nuxt.com/components/date-picker).

The need I have is simple: two date selectors (of type dateTime) to specify a start date and another end date, in a UForm. So far, you might say, nothing crazy. Then, I wanted to add validation with yup, also highlighted in the Nuxt UI doc.

Yup validation works (I tried many ways, did some debugging to see if the validation worked well). It is therefore - a priori - not on that side.

Additional context

With datetime-local type in UInput field, it works.

Logs

No response

[romhml]

Validation on input events are not supported for components outside of Nuxt UI but can be implemented.

In your example, the validation will be triggered only when the form is submitted: https://stackblitz.com/edit/nuxt-ui-pzguv9?file=app.vue

To implement validation when the input changes, you have to implement a wrapper around the VCalendar component that will emit an event back to the Form when the value changes. You can use the useFormGroup composable to do so. Here's an example implementation:

https://stackblitz.com/edit/nuxt-ui-kdi8ka?file=components/BaseDatePicker.vue

[romhml]

@EvanSchleret I just updated the last example link, I got mixed up with another reproduction.

[EvanSchleret]

Thank you very much for taking this time to show me exactly how to do it :) I'll think about whether it's useful to propose this kind of modification to the v-calendar repo. It might interest other people I suppose !

Have a great end of week

[fmarcheski]

Validation on input events are not supported for components outside of Nuxt UI but can be implemented.

In your example, the validation will be triggered only when the form is submitted: https://stackblitz.com/edit/nuxt-ui-pzguv9?file=app.vue

To implement validation when the input changes, you have to implement a wrapper around the VCalendar component that will emit an event back to the Form when the value changes. You can use the useFormGroup composable to do so. Here's an example implementation:

https://stackblitz.com/edit/nuxt-ui-kdi8ka?file=components/BaseDatePicker.vue

This solved it for me. Thanks!