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

[yihuiliao]

Closes #9064

should be fine to get rid of the timezone since this only updates the value passed to the hidden date input and won't be submitted to a form. since neither input type="date" or input type="datetime-local" support timezones, it makes sense to remove it.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to the RAC DateField Autofill and DatePicker Autofill story. Check the browser to make sure there aren't any console warnings. If autofill is supported (so far have only gotten it to work in Safari), clear the date in the field and try autofilling with your contact info.

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[snowystinger]

there will never be something after the Z?

[yihuiliao]

yeah there shouldn't. toAbsoluteString makes use of .toISOString() which formats the date as the following YYYY-MM-DDTHH:mm:ss.sssZ. see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

react-spectrum/packages/@internationalized/date/src/CalendarDate.ts

Lines 396 to 399 in f40b575

	/** Converts the date to an ISO 8601 formatted string in UTC. */
	toAbsoluteString(): string {
	return this.toDate().toISOString();
	}

[devongovett]

I think toAbsoluteString would not quite be right, because it returns the date in UTC whereas datetime-local expects it to be in the user's local time zone.

Also for granularity="day", the value may still be a CalendarDateTime or ZonedDateTime, we only display the date. Formatting it as a string will produce a full date time where the browser will expect only a date.

Maybe what we should do is always convert it to a CalendarDate or CalendarDateTime before converting to a string, depending on the granularity.

dateValue = state.granularity === 'day' 
  ? toCalendarDate(state.value).toString() 
  : toCalendarDateTime('timeZone' in state.value ? toLocalTimeZone(state.value) : state.value).toString()

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs