adobe / adobe/react-spectrum

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

Open
#6,227 6 comments 0 reactions 0 assignees View on GitHub
DatePicker
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**.

![Screenshot 2024-04-18 at 16 27 50](https://github.com/adobe/react-spectrum/assets/9938773/0db4dc2b-3575-4a5a-8afc-4c7f6621f7f3)
![Screenshot 2024-04-18 at 16 29 56](https://github.com/adobe/react-spectrum/assets/9938773/ae783e68-3b0b-4084-8853-f77445af980b)

![Screenshot 2024-04-18 at 16 26 27](https://github.com/adobe/react-spectrum/assets/9938773/1200277c-3040-4965-83ad-9525dcd74cb2)

### 💁 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.