fix: correctly format date conversion to a string for native date input (#9076)

* fix: correctly format date conversion to a string for native date input

* fix

Author: yihuiliao

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,8 +65,15 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
   } else if (state.granularity === 'hour') {
     inputStep = 3600;
   }
-
-  let dateValue = state.value == null ? '' : state.value.toString();
+  
+  let dateValue = '';
+  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';
 

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">

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}>