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

Author: yihuiliao

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';
 

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