[BUG] - DateRangePicker shows error messages only in English

[GasparAdragna]

NextUI Version

2.3.6

Describe the bug

When using the new DateRangePicker component with the I18nProvider set to "es", the error messages appear in english.

    <I18nProvider locale="es">
      <DateRangePicker
        aria-label="Datepicker"
        className="rounded-full lg:w-3/12"
        classNames={{
          inputWrapper: "rounded-full",
        }}
        maxValue={parseDate(today)}
        onChange={handleChange}
        shouldForceLeadingZeros
        value={value}
        visibleMonths={2}
      />
    </I18nProvider>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the component DateRangePicker with the I18nProvider set to "es"
2. Force an error on the component. F.E: Select an end date that's before the start date
3. The error "Start date must be before end date" should appear.

Expected behavior

I expect the errors to show on the locale previously set in the provider

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-831 [BUG] - DateRangePicker shows error messages only in English

[wingkwong]

In NextUIProvider, you can set locale es-ES.

[GasparAdragna]

In NextUIProvider, you can set locale es-ES.

Nope, that doesn’t work either

[wingkwong]

@GasparAdragna can you help run the following on your browser console and share the result? I was digging the react-stately code and think they retrieve the locale from the browser language setting rather than the provider.

(typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US'

[GasparAdragna]

@wingkwong

Thanks for the reply, here is the result from the console:

As you suggest, the language is being retrieved by the browser language. This is not the expected behaviour, at least for me. I think it should have precedence the language set on the provider.

How can we change this?

[wingkwong]

The logic is actually from react-aria side after digging into the source code.

function getLocale() {
  // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided
  // validation messages, which to not respect our provider's language.
  // @ts-ignore
  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';
}

And I do see some people raised this issue on their repo and here are some replies from their members.

Those error messages are the browser's built-in validation messages, so they rely on the browser's set language, not the provider's locale. There isn't currently a browser API for customizing this behavior. You can pass in custom error messages as an alternative instead.

We use priority of user settings: OS is the most general, then the browser, then the specific application in the browser, and so forth. Every instance that is more specific wins, if it was the other way around, then there'd be no way to change the settings from what the OS provides, and we don't want that.

We should consult the globalization team on this. I believe they might have raised something similar in the past as well. Even if the language of the website content is in a particular language, users might expect dates and numbers to be formatted according to a different setting. navigator.language also only specifies language, not region, so these are slightly different things. I could see it both ways tbh.

Therefore, there is not much we could do at this moment. You may have a custom errorMessage as a workaround. I'll put this issue on hold first until they resolve the problem.