DatePicker

Installation

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

pnpm exec frontfriend download date-picker -f react --primitive base

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

Usage

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="default" range={false} />;

Behavior

• Single-date, month, and year selections publish immediately.
• Range selection remains an internal draft until Apply.
• Apply is disabled until both range endpoints are selected; same-day ranges are valid.
• Published ranges are always complete and Reset publishes undefined.
• External value changes synchronize immediately while closed and never interrupt an open draft.
• Cancel or outside close discards the draft and adopts the latest external value; Apply publishes the draft and wins over a pending external value.
• An explicit value is authoritative; selectedPreset is descriptive or initializes selection only when no value exists.

Examples

Default

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="default" range={false} />;

Range

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="range" range />;

Range Presets

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="suggestions" range />;

Suggestions Compact

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="compact" preset="suggestions" range />;

Months

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="months" range={false} />;

Years

import { DatePicker } from "@/components/ui/date-picker";
<DatePicker disabled={false} format="dd/mm/yyyy" layout="relaxed" preset="years" range={false} />;

Formatting and external state

import { DatePicker } from "@/components/ui/date-picker";
import { Button } from "@/components/ui/button";
import * as React from "react";
type DateRange = {
  from: Date;
  to: Date;
};
export default function DatePickerExample() {
  const initialRange: DateRange = {
    from: new Date(2026, 11, 20),
    to: new Date(2026, 11, 31),
  };
  const replacementRange: DateRange = {
    from: new Date(2027, 0, 10),
    to: new Date(2027, 0, 20),
  };
  const [range, setRange] = React.useState<DateRange | undefined>(initialRange);
  return (
    <div className="flex max-w-4xl flex-col gap-6">
      <div className="flex flex-wrap gap-4">
        <DatePicker
          defaultValue={new Date(2026, 11, 31)}
          locale="it-IT"
          format="locale"
          formatOptions={{ day: "2-digit", month: "short", year: "2-digit" }}
        />
        <DatePicker
          defaultValue={new Date(2026, 11, 31)}
          locale="en-US"
          format="locale"
          formatOptions={{ day: "2-digit", month: "short", year: "2-digit" }}
        />
        <DatePicker
          defaultValue={new Date(2026, 11, 31)}
          locale="it-IT"
          format="custom"
          formatPattern="dd MMM, yy"
        />
      </div>

      <div className="flex flex-col gap-3">
        <p className="text-sm">
          Open the range, change its draft, then use the external controls
          before choosing Cancel or Apply.
        </p>
        <DatePicker
          range
          preset="suggestions"
          selectedPreset="thisMonth"
          value={range}
          onValueChange={setRange}
          locale="en-GB"
          format="locale"
          showResetButton
        />
        <div className="flex gap-2">
          <Button variant="tertiary" onClick={() => setRange(replacementRange)}>
            External replacement
          </Button>
          <Button variant="tertiary" onClick={() => setRange(undefined)}>
            External reset
          </Button>
          <Button variant="tertiary" onClick={() => setRange(initialRange)}>
            Restore explicit range
          </Button>
        </div>
        <pre className="text-xs">
          {JSON.stringify(
            range
              ? {
                  from: range.from.toISOString(),
                  to: range.to.toISOString(),
                }
              : undefined,
            null,
            2,
          )}
        </pre>
      </div>
    </div>
  );
}

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

DatePicker

DatePresetsTrigger

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