DateRangePicker

A date-range picker with presets.

Presets such as “Today” and “Last 7 days” alongside a two-month calendar. For picking a period on a dashboard, this is all you need.

export const client = "only";

import { useState } from "react";
import { DateRangePicker } from "@squadbase/vantage/components";
import type { DateRange } from "@squadbase/vantage/components";

export default function Example() {
  const [range, setRange] = useState<DateRange>({
    from: new Date(2026, 6, 1),
    to: new Date(2026, 6, 23),
  });
  return <DateRangePicker value={range} onChange={setRange} align="start" />;
}

import { DateRangePicker, defaultPresets } from "@squadbase/vantage/components";
import type { DateRange, PresetItem } from "@squadbase/vantage/components";

Replacing the presets

defaultPresets is Today / Yesterday / Last 7 days / Last 14 days / … . For your own, getValue returns a DateRange.

const presets: PresetItem[] = [
  { label: "This quarter", getValue: () => ({ from: quarterStart, to: today }) },
  ...defaultPresets,
];

<DateRangePicker presets={presets} value={range} onChange={setRange} />;