Closed mahozad closed 5 months ago
I've been following this discussion and I believe there might be a different approach to using the Jalali calendar with Vuetify's date picker. According to the Vuetify documentation, it's recommended to use date-io adapters for handling different date formats and locales.
I've created a sample to demonstrate this approach, which you can find here.
However, I've noticed two small issues in the date picker code implementation:
Text Computed Value: In the current implementation, the text
is a computed value that counts the first day of the month but it doesn't use the adapter abstraction to modify the date. So when using the Jalali adapter, the computation is incorrect.
const text = computed(() => {
return adapter.format(
adapter.date(new Date(year.value, month.value, 1)),
'monthAndYear',
)
})
it should be:
const text = computed(() => {
let _date = adapter.date()
_date = adapter.setYear(_date, year.value)
_date = adapter.setMonth(_date, month.value)
_date = adapter.setDate(_date, 1)
return adapter.format(
_date,
'monthAndYear',
)
})
Header Computed Value:
When we are passing the date value to v-model in the header, it's passing the model value to adapter.format
without using the adapter abstraction to create adapter compatible date object, which results in an error.
const header = computed(() => {
return props.multiple && model.value.length > 1
? t('$vuetify.datePicker.itemsSelected', model.value.length)
: model.value[0] && adapter.isValid(model.value[0])
? adapter.format(model.value[0], 'normalDateWithWeekday')
: t(props.header)
})
it should be:
const header = computed(() => {
return props.multiple && model.value.length > 1
? t('$vuetify.datePicker.itemsSelected', model.value.length)
: model.value[0] && adapter.isValid(model.value[0])
? adapter.format(
adapter.date(model.value[0]),
'normalDateWithWeekday')
: t(props.header)
})
Hey guys.
I've got the same problem. I'm using Nuxt 3 and Vuetify V3.5.16. When I want to change the date adapter into the vuetify.config.ts file, I get a warning with this message:
[vuetify-nuxt-module] Ignoring Vuetify Date configuration, date adapter "@date-io/class MomentUtils extends DefaultMomentUtils__default["default"]
Environment
Vuetify Version: 3.4.8 Vue Version: 3.3.13 Browsers: Chrome 120.0.0.0 OS: Windows 10
Steps to reproduce
Open the reproduction link and see the date picker in it (it is using Persian/Farsi locale which uses Solar Hijri calendar). Read on to see what problems exist in it.
Expected Behavior
Many other related issues were closed and were referred to #1892. The issue #1892 was closed and the authors requested a new issue for new versions of Vuetify.
These bugs and problems are for Jalali/Solar/Persian calendar used for Persian/Farsi (
fa
) locale and also for Lunar calendar used for Arabic (ar-SA
) locale.fa
locale (instead of۱۴۰۲ دی
should beدی ۱۴۰۲
)fa
locale)fa
locale (the default selected month is one less than what it should be and selecting a month selects the month after it)The following problems are less serious:
fa
locale1
(they start from9
or10
or11
) (because the first day of month in Solar Hijri calendar corresponds to9
th or10
th or11
th day of a Gregorian month)فروردین
(they start withدی
) (because the first month of Solar Hijri calendar corresponds to March in Gregorian calendar)Actual Behavior
It was hard to separate expected and actual functionality. Please see the expected section above.
Reproduction Link
https://play.vuetifyjs.com/#...