DateRangePreset

为 useDateRangePicker 和 useDateRangeTimePicker 定义一个预设的日期范围。

import type { DateRangePreset } from "react-date-range-picker-headless";

字段

字段	类型	描述
`label`	`string`	预设按钮的显示标签。
`value`	`{ start: Date; end: Date } \| (() => { start: Date; end: Date })`	静态范围对象或返回一个范围的工厂函数。

TypeScript 定义

interface DateRangePreset {
  label: string;
  value: { start: Date; end: Date } | (() => { start: Date; end: Date });
}

用法

静态预设使用固定的 Date 对象。工厂预设动态计算范围（对于像“最近 7 天”这样的相对范围很有用）。

const presets: DateRangePreset[] = [
  // Static preset
  {
    label: "Q1 2026",
    value: { start: new Date(2026, 0, 1), end: new Date(2026, 2, 31) },
  },
  // Factory preset (computed on click)
  {
    label: "Last 7 days",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 6);
      return { start, end };
    },
  },
  {
    label: "This month",
    value: () => {
      const now = new Date();
      const start = new Date(now.getFullYear(), now.getMonth(), 1);
      const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      return { start, end };
    },
  },
];