DateRangePreset

useDateRangePicker와 useDateRangeTimePicker를 위한 사전 정의된 날짜 범위 프리셋을 정의합니다.

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

필드

필드타입설명
labelstring프리셋 버튼에 표시될 라벨입니다.
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[] = [
  // 정적 프리셋
  {
    label: "2026년 1분기",
    value: { start: new Date(2026, 0, 1), end: new Date(2026, 2, 31) },
  },
  // 팩토리 프리셋 (클릭 시 계산)
  {
    label: "지난 7일",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 6);
      return { start, end };
    },
  },
  {
    label: "이번 달",
    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 };
    },
  },
];