Dateinput

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download date-input -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { DateInput } from "@/components/ui/date-input";
import * as React from "react";
export default function DateInputExample() {
  const [date, setDate] = React.useState("2026-09-22");
  const parsed = new Date(date + "T12:00:00");
  return (
    <DateInput
      value={Number.isNaN(parsed.getTime()) ? undefined : parsed}
      onChange={(next) => {
        if (next instanceof Date && !Number.isNaN(next.getTime()))
          setDate(
            [
              next.getFullYear(),
              String(next.getMonth() + 1).padStart(2, "0"),
              String(next.getDate()).padStart(2, "0"),
            ].join("-"),
          );
      }}
    />
  );
}

Props API

Behavior

• Validate complete dates before emitting.
• Arrow keys increment or decrement the active segment.
• Left and right navigation advances between segments.

Examples

Default

import { DateInput } from "@/components/ui/date-input";
import * as React from "react";
export default function DateInputExample() {
  const [date, setDate] = React.useState<Date>(new Date(2026, 8, 22));
  return (
    <DateInput value={date} onChange={(value) => setDate(value as Date)} />
  );
}

With Value

import { DateInput } from "@/components/ui/date-input";
import * as React from "react";
export default function DateInputExample() {
  const [date, setDate] = React.useState<Date>(new Date(2025, 11, 25));
  return (
    <DateInput value={date} onChange={(value) => setDate(value as Date)} />
  );
}

Range

import { DateInput } from "@/components/ui/date-input";
import * as React from "react";
export default function DateInputExample() {
  const [range, setRange] = React.useState({
    from: new Date(2025, 0, 1),
    to: new Date(2025, 0, 14) as Date | undefined,
  });
  return (
    <div className="flex items-center gap-2">
      <DateInput
        value={range}
        targetedValue="start"
        onChange={(value) => setRange(value as typeof range)}
      />
      <span className="text-neutral-mid">to</span>
      <DateInput
        value={range}
        targetedValue="end"
        onChange={(value) => setRange(value as typeof range)}
      />
    </div>
  );
}

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.