Dates within DatePicker `validationErrors` are not correctly localised on server when using a different language
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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](https://codesandbox.io/p/devbox/767tdk?file=%2Fcomponents%2FDateField.tsx%3A29%2C12&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv5dqtvc00063b6h3ko3izux%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv5dqtvc00023b6h12ktobxx%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv5dqtvc00043b6hjy7x4p39%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv5dqtvc00053b6hbe5cz5fn%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B51.303963959884996%252C48.696036040115004%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv5dqtvc00023b6h12ktobxx%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5dqtvb00013b6hh66ru0j2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clv5dxc2100023b6h16fscu7v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A17%252C%2522startColumn%2522%253A11%252C%2522endLineNumber%2522%253A17%252C%2522endColumn%2522%253A11%257D%255D%252C%2522filepath%2522%253A%2522%252Fcomponents%252FDatePicker.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clv5e2e1m00023b6hlusfe3fz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A14%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A14%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fpages%252F_app.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clv5e5ehp00023b6hh867nz06%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A29%252C%2522startColumn%2522%253A12%252C%2522endLineNumber%2522%253A29%252C%2522endColumn%2522%253A12%257D%255D%252C%2522filepath%2522%253A%2522%252Fcomponents%252FDateField.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv5dqtvc00023b6h12ktobxx%2522%252C%2522activeTabId%2522%253A%2522clv5e5ehp00023b6hh867nz06%2522%257D%252C%2522clv5dqtvc00053b6hbe5cz5fn%2522%253A%257B%2522id%2522%253A%2522clv5dqtvc00053b6hbe5cz5fn%2522%252C%2522activeTabId%2522%253A%2522clv5dwl8z00tk3b6hp1zmm9nu%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clv5dwl8z00tk3b6hp1zmm9nu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clv5dqtvc00043b6hjy7x4p39%2522%253A%257B%2522id%2522%253A%2522clv5dqtvc00043b6hjy7x4p39%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5dqtvc00033b6huzhnoner%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clv5dqucf000jdif8cycl15mj%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clv5dqtvc00033b6huzhnoner%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
### 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
Contributor guide
Assessment
This issue has not been assessed yet.