プリセット

素早く選択できるよう、事前に定義された日付範囲を定義します。各プリセットには label と、静的オブジェクトまたはそれを返す関数である value があります。

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind4";
import type { DateRangePreset } from "react-date-range-picker-tailwind4";
import { today, subtract, startOf, endOf } from "react-date-range-picker-headless";

const presets: DateRangePreset[] = [
  {
    label: "Last 7 days",
    value: () => ({
      start: subtract(today(), 6, "day"),
      end: today(),
    }),
  },
  {
    label: "Last 30 days",
    value: () => ({
      start: subtract(today(), 29, "day"),
      end: today(),
    }),
  },
  {
    label: "This month",
    value: () => ({
      start: startOf(today(), "month"),
      end: endOf(today(), "month"),
    }),
  },
  {
    label: "Last month",
    value: () => {
      const lastMonth = subtract(startOf(today(), "month"), 1, "day");
      return {
        start: startOf(lastMonth, "month"),
        end: endOf(lastMonth, "month"),
      };
    },
  },
];

function WithPresets() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  return <DateRangePicker value={value} onChange={setValue} presets={presets} />;
}