Nuxt•4mo ago

V-Calendar's DatePicker in FormGroup (Nuxt UI) with Yup validation

Hi ! 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. Here's the small portions of my code :

const schema = object({
    started_at: date().required('Required'),
    ended_at: date().required('Required')
        .min(yupRef('started_at'), 'End date should be after start date'),
})
type Schema = InferType<typeof schema>

const state = reactive({
    started_at: dayjs().format('YYYY-MM-DDThh:mm'),
    ended_at: dayjs().format('YYYY-MM-DDThh:mm'),
})

const schema = object({
    started_at: date().required('Required'),
    ended_at: date().required('Required')
        .min(yupRef('started_at'), 'End date should be after start date'),
})
type Schema = InferType<typeof schema>

const state = reactive({
    started_at: dayjs().format('YYYY-MM-DDThh:mm'),
    ended_at: dayjs().format('YYYY-MM-DDThh:mm'),
})

<UFormGroup
    name="started_at"
    label="Start on"
    class="grid grid-cols-2 gap-2 items-center"
    :ui="{ container: '' }"
>
  <DatePicker mode="dateTime" is24hr is-required v-model="state.started_at" />
</UFormGroup>
<UFormGroup
    name="ended_at"
    label="End on"
    class="grid grid-cols-2 gap-2 items-center"
    :ui="{ container: '' }"
>
  <DatePicker mode="dateTime" is24hr is-required v-model="state.ended_at" />
</UFormGroup>

<UFormGroup
    name="started_at"
    label="Start on"
    class="grid grid-cols-2 gap-2 items-center"
    :ui="{ container: '' }"
>
  <DatePicker mode="dateTime" is24hr is-required v-model="state.started_at" />
</UFormGroup>
<UFormGroup
    name="ended_at"
    label="End on"
    class="grid grid-cols-2 gap-2 items-center"
    :ui="{ container: '' }"
>
  <DatePicker mode="dateTime" is24hr is-required v-model="state.ended_at" />
</UFormGroup>

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. With datetime-local type input fields, it works. The DatePicker does not. Can anyone first tell me if I should ask the question on the V-Calendar repo or does anyone have an idea of the problem? Thanks !

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

V-Calendar's DatePicker in FormGroup (Nuxt UI) with Yup validation