Jalali calendar not working after upgrading to v4.9

[mmdfarajzadeh]

In my project, after upgrading Nuxt from v4.4.5 to v4.4.8 and NuxtUI from v4.7 to v4.9, the Jalali (Persian) calendar stopped working.

Previously in Nuxt UI v4.7, the Jalali calendar was applied perfectly by adding locale="fa_ir" to UApp and locale="fa-IR" to the UCalendar component.

However, after this upgrade, the Jalali calendar is no longer applied. Instead, it displays a Gregorian calendar with Persian-translated month names.

How can I properly configure and use the Jalali calendar with these new versions?

nuxt.config.ts

  app: {
    head: {
      htmlAttrs: {
        lang: 'fa',
        dir: 'rtl'
      }
    }
  }

app.vue

<script setup lang="ts">
import { fa_ir } from '@nuxt/ui/locale'

const date = ref(null)
</script>

<template>
  <UApp :locale="fa_ir">
    <UInputDate v-model="date" locale="fa-IR">
      <template #trailing>
        <UPopover>
          <UButton
            color="neutral"
            variant="link"
            size="sm"
            icon="i-lucide-calendar"
            aria-label="Select a date"
          />
          <template #content>
            <UCalendar v-model="date" locale="fa-IR" />
          </template>
        </UPopover>
      </template>
    </UInputDate>
  </UApp>
</template>

[cookesan]

locale="fa-IR" is not enough on its own here. It gives you Persian formatting and labels, but the calendar grid follows the calendar system of the DateValue passed to the component.

In the current UCalendar source, the placeholder date comes from placeholder, then modelValue, then defaultValue, and finally falls back to today(getLocalTimeZone()). That fallback is Gregorian. The docs' "other calendar systems" example uses the same pattern: create a CalendarDate with an explicit calendar object.

For Jalali, seed the picker with a Persian-calendar DateValue:

<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { PersianCalendar, getLocalTimeZone, today, toCalendar } from '@internationalized/date'
import { fa_ir } from '@nuxt/ui/locale'

const persianCalendar = new PersianCalendar()
const date = shallowRef<DateValue>()
const placeholder = shallowRef(toCalendar(today(getLocalTimeZone()), persianCalendar))
</script>

<template>
  <UApp :locale="fa_ir">
    <UInputDate v-model="date" :placeholder="placeholder" locale="fa-IR">
      <template #trailing>
        <UPopover>
          <UButton
            color="neutral"
            variant="link"
            size="sm"
            icon="i-lucide-calendar"
            aria-label="Select a date"
          />

          <template #content>
            <UCalendar
              v-model="date"
              v-model:placeholder="placeholder"
              locale="fa-IR"
            />
          </template>
        </UPopover>
      </template>
    </UInputDate>
  </UApp>
</template>

If you want the field prefilled instead of empty, initialize date with the same toCalendar(...) value. The important part is that either the model value or the placeholder is a Persian-calendar value; the locale prop only controls display language/formatting.