[Bug Report][3.6.4] v-date-input - localised format support

[japolyak]

Environment

Vuetify Version: 3.6.4
Vue Version: 3.4.21
Browsers: Chrome 125.0.0.0
OS: Windows 10

Steps to reproduce

1. Open v-date-input
2. Select date - May 12th
3. Click Ok
4. Open v-date-input with selected date
5. Press Enter

Expected Behavior

Pressing 'Enter' will not change the day to month or vice versa.

Actual Behavior

1. For dates with days equal or less than 12, pressing 'Enter' will toggle between day and month and vice versa.
2. For dates with days greater than 12, pressing Enter will cause an error. As a result, the component is blocked, it's impossible to close it by clicking 'Cancel' or outside the component. The page must be reloaded to 'resolve' the error.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

I'm also attaching one of the error stacktraces from my code, because in vuetify playground this error doesn't appear.

TypeError: Cannot read properties of undefined (reading 'date') at default (VDatePickerMonth.tsx:170:40) at runtime-core.esm-bundler.js:4439:31 at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:827:13) at Proxy.<anonymous> (runtime-core.esm-bundler.js:2171:72) at renderComponentRoot (runtime-core.esm-bundler.js:887:16) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6098:26) at ReactiveEffect.run (reactivity.esm-bundler.js:177:19) at instance.update (runtime-core.esm-bundler.js:6151:16) at updateComponent (runtime-core.esm-bundler.js:5960:18) at processComponent (runtime-core.esm-bundler.js:5894:7)

[admg]

It looks like it's parsing date from text field using 'en' locale, not currently selected one.
Also placeholder by default should use date format from current locale (same that should be used for parsing).
And the same problem with multiple='range'.

[RafalOsieka]

@admg exactly.

The real problem is in this place:

vuetify/packages/vuetify/src/labs/VDateInput/VDateInput.tsx

Line 85 in e46a98d

model.value = adapter.date(target.value)

The adapter.date(...) function is not locale aware and always tries to parse the provided value as it was a standard date string (or iso string), so in case of polish date (eg. 26.05.2024), the invalid date will be returned, as it is not a valid date.

I see two ways of fixing it:

1. Make a new method in the date-io library to make a locale aware date parsing, so consumers of that library can make use of it. Then that method can be used in vuetify
   • I already suggested that in the linked ticket - IUtils<TDate>.date method should be more locale aware dmtrKovalenko/date-io#668
2. Make a custom method in vuetify with the locale aware parsing

For now, I can recommend a workaround for the issue, which requires to override the date method of the adapter with custom implementation, that will check also the locale specific dates.

Side notes:

• The following workaround is for date-fns adapter (but should be easy to implement for other adapters) and it first tries to parse the date in the old way, just in case of invalid date it tries to parse the date in locale aware formats.
• I not guarantee that it will work in 100% times, and it may as well introduce other problems that I cannot foresee at the moment (date method is a very generic one, that is used in a lot of different places).

import DateFnsAdapter from '@date-io/date-fns';
import { isValid as dateFnsIsValid } from 'date-fns';

class BetterDateFnsAdapter extends DateFnsAdapter {
  date(value) {
    if (typeof value === "undefined") return new Date();
    if (value === null) return null;

    const defaultParsedValue = super.date(value);
    if (dateFnsIsValid(defaultParsedValue)) return defaultParsedValue;

    try {
      let parseResult = this.parse(value, this.formats.keyboardDateTime24h);
      if (dateFnsIsValid(parseResult)) return parseResult;

      parseResult = this.parse(value, this.formats.keyboardDateTime);
      if (dateFnsIsValid(parseResult)) return parseResult;

      parseResult = this.parse(value, this.formats.keyboardDate);
      if (dateFnsIsValid(parseResult)) return parseResult;
    } catch {
      // ignore
    }

    return defaultParsedValue;
  }
}

// use the custom adapter implementation
const vuetify = createVuetify({
    date: { adapter: BetterDateFnsAdapter },
});

@johnleider , @KaelWD - what are your thoughts on this topic?

[dmtrKovalenko]

Ohh wow I didn't know that vuetify is using date-io. Need to dive deep into this issue

[johnleider]

We don't use date-io. We're following the interface.

[RafalOsieka]

Oh, indeed. I must have understood it wrong previously.

Vuetify is using built-in adapter, but it is allowed to override it by the end users using the configuration as described in docs - https://vuetifyjs.com/en/features/dates/#adapter

But the issue still remains - VDateInput is not locale aware, so something should be done to fix it. Either update the implementation of the built-in adapter, or simply inside the component improve the handling of input values to be locale aware.

In case, when the changes will be done in the built-in adapter, then there may be problems, when end users are using other adapters (like DateFnsAdapter), where that changes are not implemented.

Maybe it will be easier to just update the VDateInput implementation, and not touch the adapters at all?

[krid-sdnera]

Noting that this issue is present even for other English based locales which use dd/mm/yyyy. The main desire I have is to be able to change the display format in the v-text-field.

[jacrosby]

Did you guys build a date picker that's not locale aware? Is Vuetify only for the US market? 🤦‍♂️

[johnleider]

Did you guys build a date picker that's not locale aware? Is Vuetify only for the US market? 🤦‍♂️

Are we not allowed to have bugs?

[jacrosby]

Yes very true. It would be very helpful if this could be resolved, thank you.

Apologies for the snarky comment, bad day in the office!

[PiotrStus]

@johnleider Do you have any updates on this topic?

[JustCodingSomeThings]

I am having the same issue, and I'm hoping the locale-awareness will be implemented via the v-locale-provider, which works great with the VDatePicker.

For now, we have reverted to using the open source Duet Date Picker. Hopefully we can replace it with the modified VDateInput soon, since all of our UI components are Vuetify.