Với các Thiết lập sẵn

Xác định các khoảng ngày được thiết lập sẵn để chọn nhanh. Mỗi thiết lập sẵn có một label và một value có thể là một đối tượng tĩnh hoặc một hàm trả về một đối tượng.

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} />;
}