DatePicker undefined 'dayIndex' error for custom date selection (docs out of date?)

[Henco1]

Environment

macOS 14.2.1 (23C71) node.js v20.9.0 vue v3.5.6. nuxt v3.13.2 @nuxt/ui v2.18.4 @nuxt/ui-pro v1.4.2 date-fns 4.0.0 v-calendar v3.1.2

Version

2.18.4

Reproduction

1. Create a custom date component as specified (https://ui.nuxt.com/components/date-picker#daterangepicker)

   
   <script setup lang="ts">
   import { DatePicker as VCalendarDatePicker } from 'v-calendar'
   import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
   import 'v-calendar/dist/style.css'

const props = defineProps({ modelValue: { type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>, default: null } })

const emit = defineEmits(['update:model-value', 'close'])

const date = computed({ get: () => props.modelValue, set: (value) => { emit('update:model-value', value) emit('close') } })

const attrs = { transparent: true, borderless: true, color: 'primary', 'is-dark': { selector: 'html', darkClass: 'dark' }, 'first-day-of-week': 2, }

2. Create this date range page as specified
```html
<script setup lang="ts">
import { sub, format, isSameDay, type Duration } from 'date-fns'

const ranges = [
  { label: 'Last 7 days', duration: { days: 7 } },
  { label: 'Last 14 days', duration: { days: 14 } },
  { label: 'Last 30 days', duration: { days: 30 } },
  { label: 'Last 3 months', duration: { months: 3 } },
  { label: 'Last 6 months', duration: { months: 6 } },
  { label: 'Last year', duration: { years: 1 } }
]
const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })

function isRangeSelected (duration: Duration) {
  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
}

function selectRange (duration: Duration) {
  selected.value = { start: sub(new Date(), duration), end: new Date() }
}
</script>

<template>
  <UPopover :popper="{ placement: 'bottom-start' }">
    <UButton icon="i-heroicons-calendar-days-20-solid">
      {{ format(selected.start, 'd MMM, yyy') }} - {{ format(selected.end, 'd MMM, yyy') }}
    </UButton>

    <template #panel="{ close }">
      <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
        <div class="hidden sm:flex flex-col py-4">
          <UButton
            v-for="(range, index) in ranges"
            :key="index"
            :label="range.label"
            color="gray"
            variant="ghost"
            class="rounded-none px-6"
            :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
            truncate
            @click="selectRange(range.duration)"
          />
        </div>

        <DatePicker v-model="selected" @close="close" />
      </div>
    </template>
  </UPopover>
</template>

3. Click on the 5th of September and then on the 9th of October and witness the error in console logs

Description

Following the daterange section here (https://ui.nuxt.com/components/date-picker#daterangepicker) exactly and then selecting a custom start and end date results in this error:

v-calendar.js?v=4705749a:4740 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dayIndex')
    at DateRangeContext.render (v-calendar.js?v=4705749a:4740:35)

Additional context

No response

Logs

No response

[dbaranec]

i have same problem :/

[srisar]

The issue is raised here in the v-calendar repo. But no updates yet. https://github.com/nathanreyes/v-calendar/issues/1498

[remihuigen]

I'm seeing the same error, though it doesn't break anything in the UI for me

[frasza]

Yeah, issue within v-calendar dep which also seems to be problematic one regarding the updates (last update was from last year)

[aligzl]

Did anyone figure it out ?

[DavidDeSloovere]

Did anyone figure it out ?

You can downgrade v-calendar to 3.0, or vue before 3.5

[abarke]

I ran into the same issue using the example from Nuxt UI DateRangePicker. If you open the console on this page and select a start and end date manually, you will see the error: https://ui.nuxt.com/components/date-picker#daterangepicker

[abarke]

Following silenced it for me:

<VCalendarDatePicker
    ...
    @dayclick="
      (_, event) => {
        event.target.blur();
      }
    " />

Thanks to @akorajac

[iamrevolver]

Even on their website so)) Is there a solution?

[simonmaass]

we have the following error in sentry: TypeError: undefined is not an object (evaluating 'r[0].dayIndex') at DateRangeContext.render (../node_modules/v-calendar/dist/es/index.js:3044:33)

[fedetorre]

I run into the same issue, this is my stacktrace.

runtime-core.esm-bundler.js?v=79afc713:266 Uncaught TypeError: Cannot read properties of undefined (reading 'dayIndex') at DateRangeContext.render (v-calendar.js?v=79afc713:4740:35) at v-calendar.js?v=79afc713:6967:13 at Array.forEach (<anonymous>) at v-calendar.js?v=79afc713:6966:19 at Array.forEach (<anonymous>) at ComputedRefImpl.fn (v-calendar.js?v=79afc713:6965:22) at refreshComputed (reactivity.esm-bundler.js?v=79afc713:334:29) at isDirty (reactivity.esm-bundler.js?v=79afc713:304:68) at refreshComputed (reactivity.esm-bundler.js?v=79afc713:324:65) at isDirty (reactivity.esm-bundler.js?v=79afc713:304:68)

Is there any workaround / solution?