`react-aria-components`: Console warning occurs when `DatePicker` is used with `ZonedDateTime`

[dave-meyer]

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