使用預設選項

定義預設的日期範圍以便快速選取。每個預設選項都有一個 label 和一個 value，value 可以是一個靜態物件或是一個回傳物件的函式。

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind3";
import type { DateRangePreset } from "react-date-range-picker-tailwind3";
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} />;
}