Date Input

Forms

About

A segmented date (and optional time) input where each part of the date — month, day, year, hour — is its own arrow-navigable, typeable segment inside one field.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Input to your project and fits it to your theme.

Code

How Date Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DateInput } from "@/components/ui/date-input";

export default function DateInputGranularityDemo() {
  return (
    <div
      className="flex w-full max-w-sm items-center justify-center p-8"
      style={{ background: "var(--bs-color-surface-0, var(--background))" }}
    >
      <DateInput.Root granularity="second">
        <DateInput.Label>Date &amp; time</DateInput.Label>
        <DateInput.Control>
          <DateInput.SegmentGroup>
            <DateInput.SegmentContext>
              {(segment) => <DateInput.Segment segment={segment} />}
            </DateInput.SegmentContext>
          </DateInput.SegmentGroup>
        </DateInput.Control>
        <DateInput.HiddenInput />
      </DateInput.Root>
    </div>
  );
}