From 20c24d349cd084ab79d8d4d484986faa89d34bbf Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 21 Oct 2025 11:25:47 -0700
Subject: [PATCH 1/2] fix: correctly format date conversion to a string for
 native date input

---
 packages/react-aria-components/src/HiddenDateInput.tsx     | 7 ++++++-
 .../react-aria-components/stories/DateField.stories.tsx    | 3 +--
 .../react-aria-components/stories/DatePicker.stories.tsx   | 3 ++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-aria-components/src/HiddenDateInput.tsx b/packages/react-aria-components/src/HiddenDateInput.tsx
index f0ce4b971b7..7cc3ffc3587 100644
--- a/packages/react-aria-components/src/HiddenDateInput.tsx
+++ b/packages/react-aria-components/src/HiddenDateInput.tsx
@@ -66,7 +66,12 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
     inputStep = 3600; 
   }
 
-  let dateValue = state.value == null ? '' : state.value.toString();
+  let dateValue = '';
+  if (state.value != null && 'toAbsoluteString' in state.value) {
+    dateValue = state.value.toAbsoluteString().replace('Z', '');
+  } else if (state.value != null) {
+    dateValue = state.value.toString();
+  }
 
   let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
 
diff --git a/packages/react-aria-components/stories/DateField.stories.tsx b/packages/react-aria-components/stories/DateField.stories.tsx
index 3c7ff7cdabc..133fc0602ab 100644
--- a/packages/react-aria-components/stories/DateField.stories.tsx
+++ b/packages/react-aria-components/stories/DateField.stories.tsx
@@ -94,8 +94,7 @@ export const DateFieldAutoFill = (props) => (
       {...props}
       name="bday"
       autoComplete="bday"
-      defaultValue={parseAbsoluteToLocal('2021-04-07T18:45:22Z')
-    }
+      defaultValue={parseAbsoluteToLocal('2021-04-07T18:45:22Z')}
       data-testid="date-field-example">
       <Label style={{display: 'block'}}>Date</Label>
       <DateInput className={styles.field} data-testid2="date-input">
diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx
index 4838bcffe59..ae079959edf 100644
--- a/packages/react-aria-components/stories/DatePicker.stories.tsx
+++ b/packages/react-aria-components/stories/DatePicker.stories.tsx
@@ -14,6 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, Form, Group, Heading, Input, Label, Popover, RangeCalendar, TextField} from 'react-aria-components';
 import clsx from 'clsx';
 import {Meta, StoryFn} from '@storybook/react';
+import {parseAbsoluteToLocal} from '@internationalized/date';
 import React from 'react';
 import styles from '../example/index.css';
 import './styles.css';
@@ -211,7 +212,7 @@ export const DatePickerAutofill = (props) => (
       <Label>Name</Label>
       <Input name="firstName" type="name" id="name" autoComplete="name" />
     </TextField>
-    <DatePicker data-testid="date-picker-example" name="bday" autoComplete="bday" {...props}>
+    <DatePicker data-testid="date-picker-example" name="bday" autoComplete="bday" defaultValue={parseAbsoluteToLocal('2021-04-07T18:45:22Z')} {...props}>
       <Label style={{display: 'block'}}>Date</Label>
       <Group style={{display: 'inline-flex'}}>
         <DateInput className={styles.field}>

From c2789669e270089ec23f52a3ff39bc96866ebc04 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:44:46 -0700
Subject: [PATCH 2/2] fix

---
 .../react-aria-components/src/HiddenDateInput.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-aria-components/src/HiddenDateInput.tsx b/packages/react-aria-components/src/HiddenDateInput.tsx
index 7cc3ffc3587..c87042dfc1b 100644
--- a/packages/react-aria-components/src/HiddenDateInput.tsx
+++ b/packages/react-aria-components/src/HiddenDateInput.tsx
@@ -11,7 +11,7 @@
  */
 
 
-import {CalendarDate, CalendarDateTime, parseDate, parseDateTime} from '@internationalized/date';
+import {CalendarDate, CalendarDateTime, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone} from '@internationalized/date';
 import {DateFieldState, DatePickerState, DateSegmentType} from 'react-stately';
 import React, {ReactNode} from 'react';
 import {useVisuallyHidden} from 'react-aria';
@@ -65,12 +65,14 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
   } else if (state.granularity === 'hour') {
     inputStep = 3600; 
   }
-
+  
   let dateValue = '';
-  if (state.value != null && 'toAbsoluteString' in state.value) {
-    dateValue = state.value.toAbsoluteString().replace('Z', '');
-  } else if (state.value != null) {
-    dateValue = state.value.toString();
+  if (state.value) {
+    if (state.granularity === 'day') {
+      dateValue = toCalendarDate(state.value).toString();
+    } else {
+      dateValue = toCalendarDateTime('timeZone' in state.value ? toLocalTimeZone(state.value) : state.value).toString();
+    }
   }
 
   let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';