Date Range Picker

A single-trigger date-range picker with a preset rail and a calendar.

Preset: 15d

Range: Jun 25 – Jul 9, 2026

"use client";

import { useState } from "react";

import {
  DateRangePicker,
  type DateRangeSelection,
  DEFAULT_PRESETS,
  formatRange,
} from "@smartacteam/ambient-web/date-range-picker";

export function DateRangePickerDemo() {
  const [value, setValue] = useState<DateRangeSelection>({
    preset: "15d",
    range: DEFAULT_PRESETS.find((preset) => preset.key === "15d")!.getRange(
      new Date(),
    ),
  });

  return (
    <div className="flex flex-col gap-4">
      <DateRangePicker value={value} onChange={setValue} />
      <div className="text-sm text-text-secondary">
        <div>
          Preset: <span className="font-mono">{value.preset ?? "custom"}</span>
        </div>
        <div>
          Range:{" "}
          <span className="font-mono">{formatRange(value.range) || "—"}</span>
        </div>
      </div>
    </div>
  );
}

A single-trigger date-range picker with a preset rail down the left and a calendar on the right. Selecting a preset highlights its range on the calendar; picking days directly clears the preset and becomes a custom range.

Built from design-system primitives: Menu (popover + radio rail), Calendar, Button, and an icon.

Usage

import { useState } from "react";
 
import {
  DateRangePicker,
  DEFAULT_PRESETS,
  type DateRangeSelection,
} from "@smartacteam/ambient-web/date-range-picker";
 
const [value, setValue] = useState<DateRangeSelection>({
  preset: "15d",
  range: DEFAULT_PRESETS.find((preset) => preset.key === "15d")!.getRange(
    new Date(),
  ),
});
 
<DateRangePicker value={value} onChange={setValue} />;

The component is controlled — it never holds its own selection. onChange fires with { preset, range }:

Choosing a preset → { preset: "<key>", range: { from, to } }
Picking days on the calendar → { preset: null, range: { from, to } }

Custom presets

Pass your own presets. Each resolves to a concrete range relative to now, so it stays correct regardless of when the picker opens. Supply translated labels here to localize the rail. Use the now prop to anchor presets to a fixed clock (handy when working against historical data). Build ranges with date-fns helpers.

import { addDays, endOfDay, startOfDay } from "date-fns";
 
const presets: DateRangePreset[] = [
  {
    key: "24h",
    label: "Last 24 hours",
    getRange: (now) => ({ from: addDays(now, -1), to: now }),
  },
  {
    key: "7d",
    label: "Last 7 days",
    getRange: (now) => ({
      from: startOfDay(addDays(now, -6)),
      to: endOfDay(now),
    }),
  },
  {
    key: "30d",
    label: "Last 30 days",
    getRange: (now) => ({
      from: startOfDay(addDays(now, -29)),
      to: endOfDay(now),
    }),
  },
];
 
<DateRangePicker value={value} onChange={setValue} presets={presets} />;

Props

Prop	Type	Default	Description
`value`	`DateRangeSelection`	required	`{ preset: string \| null, range }`
`onChange`	`(value: DateRangeSelection) => void`	required	Fires on preset or calendar selection
`presets`	`DateRangePreset[]`	`DEFAULT_PRESETS`	The left-rail options
`now`	`Date`	`new Date()`	Anchor for relative presets
`numberOfMonths`	`number`	`1`	Calendar months shown side by side
`align`	`"start" \| "center" \| "end"`	`"start"`	Popover alignment to the trigger
`placeholder`	`string`	`"Select dates"`	Trigger label when nothing is selected

Exports

Export	Description
`DateRangePicker`	The component
`DEFAULT_PRESETS`	Today / Yesterday / Last 3, 7, 15, 30 days
`formatRange`	`({from, to}) => "Jun 2 – Jun 16, 2024"`

Build custom preset ranges with date-fns (startOfDay, endOfDay, addDays).