DateField

In HeroUI React, date segment formatting and order (such as mm/dd/yyyy vs dd/mm/yyyy) are determined automatically by the locale via React Aria's internationalization system.

To format DateField as mm/dd/yyyy for US conventions:

Set the locale with I18nProvider

Wrap your DateField (or application root) with I18nProvider from @react-aria/i18n set to en-US:

"use client";

import { DateField, I18nProvider, Label } from "@heroui/react";

export function USDateField() {
  return (
    <I18nProvider locale="en-US">
      <DateField className="w-[256px]" name="birth-date" shouldForceLeadingZeros>
        <Label>Date of birth</Label>
        <DateField.Group>
          <DateField.Input>
            {(segment) => <DateField.Segment segment={segment} />}
          </DateField.Input>
        </DateField.Group>
      </DateField>
    </I18nProvider>
  );
}

Key Props & Options

• locale="en-US": Sets segment ordering to Month / Day / Year (mm/dd/yyyy). By default, if omitted, the component automatically inherits the user's browser locale (which is already mm/dd/yyyy for US users).

• shouldForceLeadingZeros: Optional prop on <DateField> to guarantee two-digit months and days (e.g., 05/09/2025 instead of 5/9/2025).

For full documentation and API options, visit the HeroUI DateField Documentation.