Slot content is not reactive when a day is clicked.

[DennisT]

<template>

  <DatePicker v-model="date">
    <template #default="{ inputValue, inputEvents }">
  
      <input :value="inputValue" v-text="inputValue" v-on="inputEvents" />
    </template>
  </DatePicker>
</template>

<script setup>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
import { ref } from 'vue';

const date = ref(new Date());
</script>

Stackblitz

Vue 3.4.29
VCalendar 3.1.2

Working version
Vue 3.4.28

[Jerem Ortega]

I had the same issue yesterday. It happened when I upgraded from Vue 3.3 to 3.4

[Manan Shah]

I had the same issue too.

[lorado]

Hello! I just spent couple of hours troubleshooting the issue...
Vue seem to have changed something in reactivity in the latest 3.4.29 release, so that slot content got "a step behind" now...
In 3.4.28 it works. Accordingly Vue changelog they changed reactivity, to fix some recursive issues. But it definitely broke v-calendar.

I think this change in particular is a change vuejs/core#11135 which was closing this issue: vuejs/core#11121

Maybe I'll find time later to check how to fix v-calendar...

[DennisT]

My temporary fix is to use the date model and format its value.

<input
    :value="
        date!= ''
            ? dayjs(date).format(
                  'MM/DD/YYYY',
              )
            : ''
    "
    placeholder="Select Date"
    name="date"
    v-on="inputEvents"
  />

[Philip Iezzi (Pipo)]

Same issue here with v-calendar 3.1.2 (using DatePicker component). Confirm it working on Vue 3.4.28, but broken in 3.4.29.

[kglazier]

Looks like there are a lot of pending issues. I hope this one will get worked on soon. My workaround until this is fixed is to just use the date ref and format it manually

<template>

  <DatePicker v-model="date">
    <template #default="{ inputEvents }">
  
      <input :value="date?.toLocaleDateString() ?? null" v-text="inputValue" v-on="inputEvents" />
    </template>
  </DatePicker>
</template>

<script setup>
import { Calendar, DatePicker } from 'v-calendar'
import 'v-calendar/style.css'

const date = ref()
</script>

[1Luc1]

same happens with popover and/or reactive dates

 <template #day-popover="{ day, attributes }">

const dates = ref([]);
const customData = ref({});
const attrs = ref([
  {
    key: "events",
    dot: {
      style: {
        backgroundColor: "white",
      },
    },
    dates: dates,
    popover: { visibility: "hover" },
    customData: customData,
  },
]);

[1Luc1]

Vue changes seems to be reverted with vue 3.4.31. Problem with popover and/or reactive dates seems to be fixed on my side.

[DennisT]

fixed vue@v3.4.31