Datepicker selectionMode="range": v-model disconnect when using #footer slot with preset buttons. Value shown but modelValue not updated

[tkroonfirst8]

Describe the bug

I created the following PresetsDataPicker component

<template>
  <DatePicker
    :maxDate="tomorrow"
    v-model="selectedDateRange"
    hideOnRangeSelection
    name="dateRange"
    inputClass="text-center"
    :manualInput="false"
    selectionMode="range"
    inputId="dateRange"
    fluid
    panelClass="w-full"
    dateFormat="dd-mm-yy"
  >
    <template #footer>
      <template v-for="preset in presets" :key="preset.label">
        <Button @click="setPresetRange(preset.value)" :label="preset.label" class="mr-2"></Button>
      </template>
    </template>
  </DatePicker>
</template>

<script setup lang="ts">
import { Button } from 'primevue'
import { DatePicker } from 'primevue'
import { ref } from 'vue'
import { startOfWeek, endOfWeek, startOfMonth, endOfMonth, subDays } from 'date-fns'

const presets = ref([
  { label: 'This Week', value: 'thisWeek' },
  { label: 'Last Week', value: 'lastWeek' },
  { label: 'Last Month', value: 'lastMonth' },
  { label: 'Last 3 Months', value: 'last3Months' },
  { label: 'Last 6 Months', value: 'last6Months' },
  { label: 'Last Year', value: 'last12Months' },
])

const selectedDateRange = ref<Date[]>()
const range = ref<Date[]>()
const tomorrow = new Date(new Date().setDate(new Date().getDate() + 1))

const setPresetRange = (value: string) => {
  const today = new Date()
  if (value === 'thisWeek') {
    range.value = [startOfWeek(today), endOfWeek(today)]
  } else if (value === 'lastWeek') {
    range.value = [subDays(startOfWeek(today), 7), subDays(endOfWeek(today), 7)]
  } else if (value === 'lastMonth') {
    range.value = [subDays(startOfMonth(today), 30), subDays(endOfMonth(today), 30)]
  } else if (value === 'last3Months') {
    range.value = [subDays(startOfMonth(today), 90), subDays(endOfMonth(today), 90)]
  } else if (value === 'last6Months') {
    range.value = [subDays(startOfMonth(today), 180), subDays(endOfMonth(today), 180)]
  } else if (value === 'last12Months') {
    range.value = [subDays(startOfMonth(today), 360), subDays(endOfMonth(today), 360)]
  } else range.value = []

  selectedDateRange.value = range.value
}
</script>

Based on an example on StackOverflow
https://stackoverflow.com/questions/79051313/does-primevue-4-supports-datepicker-presets

If I click the button and assign the new value (selectedDateRange.value = range.value) the value is shown in the input but update:modelValue
is not triggered. Also the overlay is not closed. There seems to be a disconnect in the v-model and the datepicker component.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

I created a fork of https://github.com/tkroonfirst8/primevue and a new branch on it but currently I am not sure how to setup a development space on this branch so I can debug my version. If somebody shows me I am happy to contribute.

Reproducer

https://bolt.new/~/primevue-4-vite-issue-template-np5wndvf

Environment

I am running this on MacOS latest in Edge Latest

Vue version

3.5.12

PrimeVue version

4.2.5.

Node version

22

Browser(s)

No response

Steps to reproduce the behavior

1 Click on the Datepicker input to open the overlay. Click on of the preset buttons. See the value being displayed in the input field.
See the value not being added to the form and see that update:modelValue is not triggered.

Expected behavior

I would expect the model to contain the selected dates as ISOString