-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
Provide a general summary of the issue here
When using a ZonedDateTime as a value of a <DatePicker /> component, a browser warning occurs in Google Chrome:
The specified value "2025-10-19T15:46:44.392+02:00[Europe/Vienna]" does not conform to the required format. The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".
🤔 Expected Behavior?
No browser warning should occur when using a ZonedDateTime as value for <DatePicker />.
😯 Current Behavior
A browser warning occurs when using a ZonedDateTime as value for <DatePicker />.
💁 Possible Solution
Perhaps the HiddenDateInput component could check if the value is a ZonedDateTime (ref). If it is a ZonedDateTime, execute toAbsoluteString (ref) instead of toString.
🔦 Context
The DatePicker component converts the ZonedDateTime to string, which includes the time zone, and uses it as the value prop on an HTML input element. However, the value of the input should be an ISO string, and not include the time zone.
This bug did not occur in react-aria-components version 1.10.0. Also, the error message occurs in Chrome, but not Firefox.
We want to keep browser console warnings at a minimum since continuously ignoring warnings is a bad idea, and to not upset our customers. Also, the warning points to a potential accessibility problem.
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/gallant-shadow-y8n9kf
Version
react-aria-components 1.13.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Windows 11 (Version 10.0.26100 Build 26100)
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response