How to set v-model type of UCalendar

[ksu930]

Description

How to set v-model type of UCalendar
`

<template #heading="{ value }">

{{ formatMonthYear(value) }}

      <!-- Day 커스터마이즈 -->
      <template #day="{ day }">
        <div class="custom-day">
          <span
            :class="{
              'text-sm font-semibold': isDaySelected(day),
              'text-sm font-normal': !isDaySelected(day),
            }"
            >{{ extractDay(day) }}</span
          >
        </div>
      </template>

      <template #week-day="{ day }">
        <div class="custom-week-day bg-white border-none">
          <span class="font-medium text-xs text-[#7e7e7e]">{{ day }}</span>
          <!-- 예시: 요일을 간단하게 출력 -->
        </div>
      </template>
    </UCalendar>

`

const datePickerValue = ref<{ start: DateValue; end: DateValue }>({ start: new CalendarDate( new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() ) as DateValue, end: new CalendarDate( new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() ) as DateValue, });

I put the above variable in v-model, but I get the following error. How should I declare the type?

'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다. 'start' 속성의 형식이 호환되지 않습니다. '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다. '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다. '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322) Calendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly "onUpdate:modelValue"?: ((date: DateRange | null) => any) | undefined; readonly "onUpdate:placeholder"?: ((...args: unknown[]) => any) | undefined; readonly "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.