DateRangePicker

プリセット付きの期間選択。

「今日」「直近 7 日」といったプリセットと、2 か月分のカレンダーを組み合わせた期間選択です。ダッシュボードの期間指定はこれで足ります。

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";

PropType

value?DateRange

`{ from, to }`。どちらも `Date | undefined`。

TypeDateRange

onChange?(range: DateRange) => void

確定時。

Type(range: DateRange) => void

presets?PresetItem[]

左側に並べるプリセット。

TypePresetItem[]

DefaultdefaultPresets

showPresets?boolean

プリセット列を出すか。

Typeboolean

Defaulttrue

minDate?Date

選べる下限。

TypeDate

maxDate?Date

選べる上限。

TypeDate

placeholder?string

未選択時のトリガー表示。

Typestring

align?"start" | "center" | "end"

ポップオーバーの寄せ方。

Type"start" | "center" | "end"

disabled?boolean

操作を無効にする。

Typeboolean

プリセットを差し替える

defaultPresets は「今日 / 昨日 / 直近 7 日 / 直近 14 日 / …」です。自分で定義するときは getValue が DateRange を返すようにします。

const presets: PresetItem[] = [
  { label: "今四半期", getValue: () => ({ from: quarterStart, to: today }) },
  ...defaultPresets,
];

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