search

samk-dev / nuxt-vcalendar

Integrates V Calendar in Nuxt
MIT License
21 stars 2 forks source link

Error: DatePicker context missing. Please verify this component is nested within a valid context provider. #17

Open simonmaass opened 6 days ago

simonmaass commented 6 days ago

In sentry i can see the following error:

TypeError: undefined is not an object (evaluating 'i.value.modelValue') TypeError: failed to format relative time

Screenshot from user:

image

User-Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15

samk-dev commented 6 days ago

hey @simonmaass thanks for reporting. please could you provide a minimal reproduction. It would be helpful to know what data type is being passed to the modelValue it seems like an issue with vcalendar itself.

Thanks

simonmaass commented 6 days ago

https://github.com/nathanreyes/v-calendar/issues/1482

samk-dev commented 6 days ago

could you please to see the data type is being passed to the model value? something like this 2010-11-15T14:32:28-0500?? did you pass any custom config to <DatePicker />??

simonmaass commented 6 days ago

everything is wrapped in ClientOnly..

<VDatePicker
    v-model.string="appointmentDate"
    is-required
    expanded
    :first-day-of-week="2"
    borderless
    locale="de"
    :min-date="minDate.format('YYYY-MM-DD')"
    :max-date="maxDate.format('YYYY-MM-DD')"
    :disabled-dates="disabledDates"
    :masks="{ modelValue: 'YYYY-MM-DD' }"
  ></VDatePicker>

const appointmentDate = ref<string | undefined>('')

This is the error: TypeError: undefined is not an object (evaluating 'i.value.modelValue')

samk-dev commented 6 days ago

with the reproduction from the previous comment when I pass a date string like this one 2000-01-01T12:00:00.000Z it works good, I had to remove :min-date and :max date as I don't know what shape is your data.

You could try to change the type of appointmentDate from string | undefined to string | null as the docs shows the mode-value type https://vcalendar.io/datepicker/api.html#api

also I am not sure what data is being received in appointmentDate is a dateString? just to make sure add toDateString v-model.string="appointmentDate.toDateString()" this happened to me recently and was a bug in the backend I was using that sometimes retuned broken dates like this one -0001-11-30T00:00:00-0500