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: "Кв. 1 2026 г.",
    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 };
    },
  },
];