Nuxt•3w ago

nuxt ui calendar set default date to specific date when using v-model

I have a UCalendar and i want to set the default date to a specific date, however im also using v-model. I only want this default to be in the calendar instead of the default which is today by default. can i do this without it setting the v-model to that date?

11 Replies

kapa.ai•3w ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can set the initially displayed month or date in the Nuxt UI UCalendar component (when using v-model) without changing the v-model value itself by using the placeholder or defaultPlaceholder prop. - The placeholder prop lets you control which month/year is shown when the calendar opens, without affecting the selected value (v-model). - The defaultPlaceholder prop sets the initial placeholder date if no placeholder is provided. For example, to show the calendar initially on May 10, 2025, but keep v-model as null or your own value:

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = ref(null) // or your actual v-model value
const placeholder = new CalendarDate(2025, 5, 10)
</script>

<template>
  <UCalendar v-model="value" :placeholder="placeholder" />
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = ref(null) // or your actual v-model value
const placeholder = new CalendarDate(2025, 5, 10)
</script>

<template>
  <UCalendar v-model="value" :placeholder="placeholder" />
</template>

This way, the calendar will open to May 2025, but the v-model will not be set to that date unless the user selects it. The placeholder only controls the visible month, not the selected value Calendar props. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

WiFi PlugOP•3w ago

@kapa.ai and then when i do have a default date i want to be selected via model-value it should auto select right?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, when you provide a value to v-model (or model-value), the calendar will automatically select and display that date as the selected value. The calendar will also update its visible month to match the selected date. If you later set v-model to a specific date, that date will be selected and shown in the calendar Calendar usage. So, to summarize: - If v-model is null and you use placeholder, the calendar shows the placeholder month but nothing is selected. - If you set v-model to a date, that date is selected and the calendar view updates to show it. This is the default behavior of the UCalendar component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

WiFi PlugOP•3w ago

@kapa.ai but if i do have a date and i pass it in via v-model it's selected but it seems that my placeholder is still the page that's opened, i thought v-model would override the placeholder? should i make the placeholder watch my v-model to be the same if it's not null?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources indicate that the placeholder prop in UCalendar controls which month is displayed when no date is selected, and v-model controls the selected date. However, the documentation does not explicitly state whether v-model will override the placeholder when a value is present, or if you need to manually sync them. Based on the available examples and prop descriptions, it appears that placeholder is used to control the visible month when there is no selected date (i.e., when v-model is null or undefined). When v-model has a value, the calendar should display and select that date, and the visible month should update accordingly Calendar props. If you are experiencing a case where the calendar still opens to the placeholder month even when v-model has a value, the documentation does not provide enough information to confirm if this is expected behavior or a bug. There is no explicit mention that you need to watch v-model and update placeholder yourself. In summary:
The knowledge sources do not explicitly mention whether you should manually sync placeholder with v-model. The intended behavior is that v-model should control the selected date and visible month when set, and placeholder is only for when no date is selected. If this is not happening, it may be worth checking for updates or reporting the issue. Reference: Calendar props ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

WiFi PlugOP•3w ago

@kapa.ai how do i manually set a zod error message or error state on a specific field in my zod validated uform?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To manually set an error message or error state on a specific field in a Zod-validated UForm, you can use the setErrors method exposed by the UForm component. This method allows you to programmatically set errors for specific fields, regardless of the validation schema. Here's how you can do it: 1. Get a reference to your UForm using useTemplateRef:

<script setup lang="ts">
const form = useTemplateRef('form')
</script>

<template>
  <UForm ref="form" ... />
</template>

<script setup lang="ts">
const form = useTemplateRef('form')
</script>

<template>
  <UForm ref="form" ... />
</template>

2. Use setErrors to set an error for a specific field:

form.value?.setErrors([
  { name: 'email', message: 'This email is already taken.' }
])

form.value?.setErrors([
  { name: 'email', message: 'This email is already taken.' }
])

This will display the error message on the field named email, even if you are using Zod for validation. The error will be shown in the corresponding UFormField automatically Expose. You can call setErrors at any time, such as after an API call or custom logic. Note: The setErrors method expects an array of error objects with name and message properties. Reference: Expose ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

nuxt ui calendar set default date to specific date when using v-model

Did you find this page helpful?