Dragofafmir
Dragofafmir
NNuxt
Created by Dragofafmir on 4/25/2024 in #❓・help
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 !
1 replies