Nuxt•5d ago

Weird date error with callender element

<template>
    <div class="mt-8 ml-8">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" variant="subtle">bruh</UButton>

                <template #content>
                    <UCalendar range v-model="dateRange" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

<script setup>
import { ref, watch } from 'vue'


const dateRange = ref({
    start: new Date(2025, 2, 20),
    end: new Date(2025, 2, 27)
})

watch(dateRange, (n_) => {
    console.log(dateRange.value)
})

</script>

<template>
    <div class="mt-8 ml-8">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" variant="subtle">bruh</UButton>

                <template #content>
                    <UCalendar range v-model="dateRange" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

<script setup>
import { ref, watch } from 'vue'


const dateRange = ref({
    start: new Date(2025, 2, 20),
    end: new Date(2025, 2, 27)
})

watch(dateRange, (n_) => {
    console.log(dateRange.value)
})

</script>

I am using vue with nuxt/ui and vite as a backend I am trying to set a date range. I want the start to be 7 days ago, and end to be the current date. But isntead i am getting a few errors which ill copy paste and send here:

comparators.js?v=3b5ed998:8 Uncaught (in promise) TypeError: defaultValue.copy is not a function
    at getDefaultDate (comparators.js?v=3b5ed998:8:25)
    at setup (RangeCalendarRoot.js?v=3b5ed998:87:25)
    at callWithErrorHandling (chunk-U3LI7FBV.js?v=3b5ed998:2263:19)
    at setupStatefulComponent (chunk-U3LI7FBV.js?v=3b5ed998:9983:25)
    at setupComponent (chunk-U3LI7FBV.js?v=3b5ed998:9944:36)
    at mountComponent (chunk-U3LI7FBV.js?v=3b5ed998:7300:7)
    at processComponent (chunk-U3LI7FBV.js?v=3b5ed998:7266:9)
    at patch (chunk-U3LI7FBV.js?v=3b5ed998:6782:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-U3LI7FBV.js?v=3b5ed998:7410:11)
    at ReactiveEffect.run (chunk-U3LI7FBV.js?v=3b5ed998:481:19)

comparators.js?v=3b5ed998:8 Uncaught (in promise) TypeError: defaultValue.copy is not a function
    at getDefaultDate (comparators.js?v=3b5ed998:8:25)
    at setup (RangeCalendarRoot.js?v=3b5ed998:87:25)
    at callWithErrorHandling (chunk-U3LI7FBV.js?v=3b5ed998:2263:19)
    at setupStatefulComponent (chunk-U3LI7FBV.js?v=3b5ed998:9983:25)
    at setupComponent (chunk-U3LI7FBV.js?v=3b5ed998:9944:36)
    at mountComponent (chunk-U3LI7FBV.js?v=3b5ed998:7300:7)
    at processComponent (chunk-U3LI7FBV.js?v=3b5ed998:7266:9)
    at patch (chunk-U3LI7FBV.js?v=3b5ed998:6782:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-U3LI7FBV.js?v=3b5ed998:7410:11)
    at ReactiveEffect.run (chunk-U3LI7FBV.js?v=3b5ed998:481:19)

7 Replies

kapa.ai•5d ago

Hi @Oyl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is because the UCalendar component from Nuxt UI expects a specific date object type from the @internationalized/date package, but you're using JavaScript's native Date objects. The Issue The UCalendar component requires date values to be instances of CalendarDate, CalendarDateTime, or ZonedDateTime from the @internationalized/date package, not JavaScript's native Date objects. This is why you're getting the error defaultValue.copy is not a function - the component is trying to call methods that exist on these specialized date objects but not on native Date objects. Solution You need to use the appropriate date objects from the @internationalized/date package. Here's how to fix your code:

<template>
    <div class="mt-8 ml-8">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" variant="subtle">bruh</UButton>

                <template #content>
                    <UCalendar range v-model="dateRange" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { CalendarDate } from '@internationalized/date'

// Initialize with CalendarDate objects
const dateRange = ref({
    start: new CalendarDate(2025, 3, 20), // Note: month is 1-based in CalendarDate (March is 3)
    end: new CalendarDate(2025, 3, 27)
})
// For setting to 7 days ago and today
onMounted(() => {
    const today = new Date()
    const sevenDaysAgo = new Date(today)
    sevenDaysAgo.setDate(today.getDate() - 7)
    
    dateRange.value = {
        // Note: CalendarDate uses 1-based months, unlike JavaScript's Date which uses 0-based months
        start: new CalendarDate(sevenDaysAgo.getFullYear(), sevenDaysAgo.getMonth() + 1, sevenDaysAgo.getDate()),
        end: new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
    }
})

watch(dateRange, (n_) => {
    console.log(dateRange.value)
})
</script>

<template>
    <div class="mt-8 ml-8">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" variant="subtle">bruh</UButton>

                <template #content>
                    <UCalendar range v-model="dateRange" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { CalendarDate } from '@internationalized/date'

// Initialize with CalendarDate objects
const dateRange = ref({
    start: new CalendarDate(2025, 3, 20), // Note: month is 1-based in CalendarDate (March is 3)
    end: new CalendarDate(2025, 3, 27)
})
// For setting to 7 days ago and today
onMounted(() => {
    const today = new Date()
    const sevenDaysAgo = new Date(today)
    sevenDaysAgo.setDate(today.getDate() - 7)
    
    dateRange.value = {
        // Note: CalendarDate uses 1-based months, unlike JavaScript's Date which uses 0-based months
        start: new CalendarDate(sevenDaysAgo.getFullYear(), sevenDaysAgo.getMonth() + 1, sevenDaysAgo.getDate()),
        end: new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
    }
})

watch(dateRange, (n_) => {
    console.log(dateRange.value)
})
</script>

Key Points 1. Import CalendarDate from @internationalized/date 2. Use CalendarDate objects instead of native Date objects 3. Remember that CalendarDate uses 1-based months (January is 1, February is 2, etc.), unlike JavaScript's Date which uses 0-based months (January is 0, February is 1, etc.) The UCalendar component documentation shows that it accepts specific date types for its props like modelValue, minValue, maxValue, and placeholder from the Calendar component documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OylOP•5d ago

@kapa.ai

<template>
    <div class="mt-8 ml-8 flex gap-2">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <USelect
            v-model="interval"
            variant="subtle"
            :items="intervals"
            class="text-white bg-charcoal-900"
            :ui="{
                menu: 'bg-charcoal-700 text-white',
                option: 'hover:bg-charcoal-700 text-white'
            }"/>
        </div>
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" >{{ dates[0] }} -> {{ dates[7] }}</UButton>

                <template #content>
                    <UCalendar multiple v-model="dates" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

<template>
    <div class="mt-8 ml-8 flex gap-2">
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <USelect
            v-model="interval"
            variant="subtle"
            :items="intervals"
            class="text-white bg-charcoal-900"
            :ui="{
                menu: 'bg-charcoal-700 text-white',
                option: 'hover:bg-charcoal-700 text-white'
            }"/>
        </div>
        <div class="flex flex-col w-fit">
            <span class="text-white">Dates</span>
            <UPopover>
                <UButton class="text-white bg-charcoal-900" >{{ dates[0] }} -> {{ dates[7] }}</UButton>

                <template #content>
                    <UCalendar multiple v-model="dates" class="text-white bg-charcoal-700" />
                </template>
            </UPopover>
            
        </div>
        
    </div>
    
</template>

I got what i wanted to work with the dates this USelect element is NOT getting styled properly and its really annoying me The background is still the default neutral bg color the text color is black with a black border and even targeting the ui prop isnt changing it. if i add the base to the ui prop that DOES change the base element but the other things arent changing

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I can see you're having trouble styling the USelect component from Nuxt UI. The issue is with how you're trying to customize the dropdown menu and options. The Issue When customizing the USelect component, you need to target the correct slot names in the ui prop. Based on the knowledge sources, the USelect component uses different slot names than what you're currently using. Solution You need to update your ui prop to target the correct slots. Here's how to properly style the USelect component:

<USelect
  v-model="interval"
  variant="subtle"
  :items="intervals"
  class="text-white bg-charcoal-900"
  :ui="{
    base: 'bg-charcoal-900 text-white',
    content: 'bg-charcoal-700 text-white',
    item: 'text-white hover:bg-charcoal-700 data-highlighted:bg-charcoal-700'
  }"
/>

<USelect
  v-model="interval"
  variant="subtle"
  :items="intervals"
  class="text-white bg-charcoal-900"
  :ui="{
    base: 'bg-charcoal-900 text-white',
    content: 'bg-charcoal-700 text-white',
    item: 'text-white hover:bg-charcoal-700 data-highlighted:bg-charcoal-700'
  }"
/>

Explanation The USelect component in Nuxt UI v3 uses Tailwind Variants for styling, which has a different approach to theming than previous versions: 1. The base slot targets the main input element 2. The content slot targets the dropdown menu container 3. The item slot targets the individual dropdown options Your current approach is using menu and option, which aren't the correct slot names for the USelect component in the current version of Nuxt UI. Additionally, for hover states in dropdown items, you should use data-highlighted:bg-charcoal-700 instead of just hover:bg-charcoal-700 to ensure proper styling when navigating with keyboard. If you need more detailed customization, you can check the Nuxt UI Theme documentation which explains the slot-based styling system used in Nuxt UI components. Remember that Nuxt UI v3 has updated its theming system, so any customizations you might have used in v2 would need to be updated to the new slot-based approach as described in the migration guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HugoRCD•5d ago

@Oyl Is the Calendar the only component with a buggy style?

OylOP•5d ago

not the calander it was the select but i fixed it

Gaming

Programming

Weird date error with callender element

Did you find this page helpful?