[Bug]: Date adapter locale not used

[mtdvlpr]

When using Vuetify directly, the following configuration works to get a DateAdapter with a default locale (see playground):

import { createVuetify } from 'vuetify'
import { nl } from 'date-fns/locale'
import DateFnsAdapter from '@date-io/date-fns'

export const vuetify = createVuetify({
  date: {
    adapter: new DateFnsAdapter({ locale: nl }),
  },
})

When I try to accomplish the same with vuetify-nuxt-module I get a 500 error (see reproduction)

Related

• https://github.com/vuetifyjs/vuetify/issues/18769

[userquin]

I'll need to review date entry, it seems the way to register the date adapter has changed, now we need to use the constructor passing the default locale, I asked in Discord Vuetify server (nuxt channel)

[userquin]

the adapter is registered properly, you're using date-dns wrongly, no idea how to use it but the error comes from the formatByString call:

[mtdvlpr]

It's because of the localize prop. When I use the DateAdapter in Vuetify or directly outside of Vuetify it works. I'm probably misusing the existing locale prop, so there should be some other way to provide the locale or provide the initialised DateAdapter instead of just the name as string

[userquin]

locale in Vuetify is LocaleOptions & RtlOptions and localize is not there IIRC, luxon is working properly...

it seems we need some conversion, using luxon works, so, Vuetify should initialize it properly or the module?

[userquin]

I'm checking the logic in the luxon adapter, but seems date-fns is not working properly, I'll check also the locales from the library, I'll try to add required logic (will take some time since I need to check every adapter)

[userquin]

locale is a string in Luxon: https://github.com/dmtrKovalenko/date-io/blob/master/packages/luxon/src/luxon-utils.ts#L36

locale can be any: https://github.com/dmtrKovalenko/date-io/blob/master/packages/core/IUtils.d.ts#L73C12-L73C15

Reviewing logic here...

[mtdvlpr]

@userquin, I have now also reported the bug at Vuetify, since following the docs for VDatePicker is giving the same error: https://github.com/vuetifyjs/vuetify/issues/18769

[mtdvlpr]

So the bug is not yours, but it would still be a nice enhancement to be able to define the locale in the DateAdapter constructor, since that does currently work

[userquin]

I'll check this issue tmr, don't close this issue and thx.

There are also some changes in 3.4 version, date picker not refreshing the header part here when switching locale.

[mtdvlpr]

This works in Vuetify: Playground

[mtdvlpr]

I've narrowed the bug down to vuetify-nuxt-module again (see reproduction). The code I'm using there works in Vuetify playground.

[mtdvlpr]

@userquin, I think this line is the killer: https://github.com/userquin/vuetify-nuxt-module/blob/1bfbb9eb664cef9f1cc3f87c45b69d6a1425c690/src/vite/vuetify-date-configuration-plugin.ts#L43

The date-fns locale objects have functions in them (like the locale2.month function that throws the 500 error saying it's not a function). Using JSON.parse(JSON.stringify)) breaks functions in the object. You should import locale explicitly (like adapter) without modifications.

[mtdvlpr]

Hi @userquin you're probably busy, which is fine. Any idea when this issue could be picked up?

[userquin]

I'll try to check this issue this week, but, if vuetify is not working, it should be fixed in vuetify side, maybe the any type in the locale option in the adapter is a problem, and vuetify can only work with adapters not using string

[mtdvlpr]

@userquin vuetify is working. See my earlier comments.

[userquin]

@mtdvlpr rn I'm reviewing this, there are a few erratas in docs, it is localeMessages instead loadMessages (I'll fix it), I'm adding a new date-io-playground to the repo to test all date-io adapters:

• :heavy_check_mark: @date-io/date-fns
• :x: @date-io/moment
• :heavy_check_mark: @date-io/luxon
• :x: @date-io/dayjs
• :x: @date-io/js-joda
• :x: @date-io/date-fns-jalali
• :x: @date-io/jalaali
• :x: @date-io/hijri

[userquin]

@mtdvlpr if you want to check it clone this repo and checkout the branch: from root folder run nr dev:prepare:date-io && nr dev:date-io

[userquin]

@mtdvlpr should be fixed in v0.7.3

[mtdvlpr]

@userquin, did you see the v-date-picker docs about date adapter locales? If you were to copy the adapter: { locale } prop as is, it should work and if it doesn't, it would be a Vuetify bug

[userquin]

@mtdvlpr no, but I figured out how to deal with dates, did you check app.vue in date-io-playgorund folder and the vite plugin?

https://github.com/userquin/vuetify-nuxt-module/blob/main/src/vite/vuetify-date-configuration-plugin.ts

[mtdvlpr]

I will when I get home