Dates within DatePicker validationErrors are not correctly localised on server when using a different language

[ixTec]

Provide a general summary of the issue here

When using validationErrors from useDatePicker in @react-aria/datepicker, the date is not correctly localised, causing a hydration error / mismatch in text values.

🤔 Expected Behavior?

Dates in error strings are correctly localised, just like the DateField dates.

😯 Current Behavior

When using validationErrors from useDatePicker in @react-aria/datepicker, the date is not correctly localised, causing a hydration error / mismatch in text values.

The date for the DateField is correct and does not face this issue.

This issue is only present when your browser has a different preferred language (anything not "English" or "English US") - one that has a different date format to the default.

An example of this can be seen below, where the preferred language is "English (United Kingdom)" in Chrome. The DateField value is correctly localised on the server and client, but the date in the error message is formatted correctly on the client but not on the server.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

CodeSandbox

Version

• "@react-aria/datepicker": "3.9.3",
• "@react-aria/i18n": "^3.10.2",
• "@internationalized/date": "^3.5.2",
• "@react-aria/ssr": "^3.9.2",
• "@react-aria/utils": "^3.23.2",
• "react-stately": "^3.30.1"

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

Mac OS

[ixTec]

Building on this, it looks like the errors do not respect the locale set by the I18nProvider - see:

Note that the locale is set to es-ES, and you can see the DateField has the correct format for the locale (no leading zero), but the error is in English and has the incorrect format (it has a leading zero)

[reidbarber]

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: https://react-spectrum.adobe.com/react-spectrum/forms.html#customizing-error-messages

[ixTec]

Oh that's a shame. Is there a straightforward way to extract the date value from from the error? Or would regex be my only bet? Or should the date have the correct locale format already?

The main problem is the date not using the correct locale (and therefore causing client/server mismatch errors), so if I could easily extract this and format it correctly, then it wouldn't be a big of a concern.

Right now the server/client mismatch is our block.

EDIT: I suppose I could use the minValue/maxValue provided to the component, but this wouldn't give me the original browser-provided error message when using validationDetails to specify it on the validationDetails.rangeOverflow / rangeUnderflow and so I'd have to provide a custom (and therefore may as well translate) message itself

[LFDanLu]

Perhaps we do a isSSR check and turn off validation if true, we will need to figure out how though since the util for checking isSSR is from react aria and the validation happens in the stately hooks which shouldn't import from those packages since it is a circular dep.