DateRangePreset

กำหนดค่าที่ตั้งไว้ล่วงหน้าสำหรับช่วงวันที่สำหรับ useDateRangePicker และ useDateRangeTimePicker

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

ฟิลด์

ฟิลด์ประเภทคำอธิบาย
labelstringป้ายกำกับที่แสดงสำหรับปุ่ม preset
value{ start: Date; end: Date } | (() => { start: Date; end: Date })อ็อบเจ็กต์ช่วงค่าคงที่หรือ factory function ที่คืนค่าช่วง

คำจำกัดความ TypeScript

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

การใช้งาน

Preset แบบคงที่จะใช้ออบเจ็กต์ Date ที่ตายตัว Preset แบบ Factory จะคำนวณช่วงค่าแบบไดนามิก (มีประโยชน์สำหรับช่วงค่าสัมพัทธ์ เช่น “7 วันล่าสุด”)

const presets: DateRangePreset[] = [
  // Preset แบบคงที่
  {
    label: "Q1 2026",
    value: { start: new Date(2026, 0, 1), end: new Date(2026, 2, 31) },
  },
  // Preset แบบ Factory (คำนวณเมื่อคลิก)
  {
    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 };
    },
  },
];