DateField in HTML forms

[stefanprobst]

The docs state that in HTML forms, the "value will be submitted to the server as an ISO 8601 formatted string according to the granularity of the value."

It's not 100% clear to me what to expect in this case:

import { parseAbsoluteToLocal } from "@internationalized/date";
import { DateField, DateInput, DateSegment } from 'react-aria-components';

function Example() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        alert(new FormData(e.currentTarget).get("date"));
      }}
    >
      <DateField
        aria-label="Date"
        defaultValue={parseAbsoluteToLocal(new Date("2025-01-01").toISOString())}
        granularity="day"
        name="date"
      >
        <DateInput>
          {(segment) => <DateSegment segment={segment} />}
        </DateInput>
      </DateField>
      <button>Submit</button>
    </form>
  )
}

SHould "2025-01-01" or "2025-01-01T01:00:00+01:00[Europe/Vienna]" be submitted.

I would have expected the former (because of granularity="day"), but it's actually the latter (i think because of defaultValue being a ZonedDateTime).

[devongovett]

It uses the full value. The granularity prop only affects what is displayed, not the actual value. You can convert it to a CalendarDate if you want to remove the time part of the value. https://react-spectrum.adobe.com/internationalized/date/ZonedDateTime.html#to-a-date-or-time-only

[stefanprobst]

thanks!

if the granularity prop is for display only, what does "granularity" refer to in the date-field docs here: "value will be submitted to the server as an ISO 8601 formatted string according to the granularity of the value"?

---

also, is it possible to force an empty date-field into ZonedDateTime mode - currently, the following edit form will submit 2 different date formats, depending on whether defaultValue is empty or not:

import { parseAbsoluteToLocal } from "@internationalized/date";
import { DateField, DateInput, DateSegment } from 'react-aria-components';

const records = [
  { id: 1, date: parseAbsoluteToLocal(new Date("2025-01-01").toISOString()) },
  { id: 2, date: null }
]

function Example() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        alert(JSON.stringify(new FormData(e.currentTarget).getAll("date")));
      }}
    >
      {records.map((record) => {
        return (
          <DateField
            key={record.id}
            aria-label="Date"
            defaultValue={record.date}
            granularity="day"
            name="date"
          >
            <DateInput>
              {(segment) => {
                return <DateSegment segment={segment} />;
              }}
            </DateInput>
          </DateField>
        );
      })}

      {/*
       * Changing both date fields to "7/25/2025" will submit:
       * ["2025-07-25T01:00:00+02:00[Europe/Vienna]","2025-07-25"]
       */}
      <button>Submit</button>
    </form>
  );
}

[devongovett]

Perhaps "type of the value" would be clearer in the docs. The format depends if it's a CalendarDate, CalendarDateTime, ZonedDateTime, etc.

For your second question, you can control the format of the empty state with the placeholderValue prop (eg passing a ZonedDateTime).