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,
}
</script>

<template>
  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
</template>

<style>
:root {
  --vc-gray-50: rgb(var(--color-gray-50));
  --vc-gray-100: rgb(var(--color-gray-100));
  --vc-gray-200: rgb(var(--color-gray-200));
  --vc-gray-300: rgb(var(--color-gray-300));
  --vc-gray-400: rgb(var(--color-gray-400));
  --vc-gray-500: rgb(var(--color-gray-500));
  --vc-gray-600: rgb(var(--color-gray-600));
  --vc-gray-700: rgb(var(--color-gray-700));
  --vc-gray-800: rgb(var(--color-gray-800));
  --vc-gray-900: rgb(var(--color-gray-900));
}

.vc-primary {
  --vc-accent-50: rgb(var(--color-primary-50));
  --vc-accent-100: rgb(var(--color-primary-100));
  --vc-accent-200: rgb(var(--color-primary-200));
  --vc-accent-300: rgb(var(--color-primary-300));
  --vc-accent-400: rgb(var(--color-primary-400));
  --vc-accent-500: rgb(var(--color-primary-500));
  --vc-accent-600: rgb(var(--color-primary-600));
  --vc-accent-700: rgb(var(--color-primary-700));
  --vc-accent-800: rgb(var(--color-primary-800));
  --vc-accent-900: rgb(var(--color-primary-900));
}
</style>

2. Create this date range page as specified

<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

[anoviany]

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?

[moein1378]

Following silenced it for me:

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

i use it but in some cases it doesn't work!(when change the model briskly over and over finally in console show the errors...)

[netgfx]

why was this closed then? I use it on a modal and still have the same issue

[Premod1]

I still have the same issue

I used the code below. Fixed my issue

<DatePicker  @dayclick=" (day, event) => { event.target.blur()  } " />

[andrefreirecg]

The problem continues.

[christeena-mary]

Still the problem exists