useDateRangePicker

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

import { useState } from "react";
import { useDateRangePicker } from "react-date-range-picker-headless";

function MyDateRangePicker() {
  const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  const picker = useDateRangePicker({
    value: range,
    onChange: setRange,
    presets: [
      {
        label: "Last 7 days",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setDate(start.getDate() - 6);
          return { start, end };
        },
      },
    ],
  });

  return (
    <div ref={picker.containerRef}>
      <button onClick={picker.handleToggle}>
        {picker.displayValue || picker.locale.rangePlaceholder}
      </button>
      {picker.isOpen && (
        <div ref={picker.popupRef} onKeyDown={picker.handleKeyDown}>
          {/* Two calendars side by side */}
          {[picker.leftCalendar, picker.rightCalendar].map((cal, calIdx) => (
            <div key={calIdx}>
              <span>{picker.locale.formatMonthYear(cal.month)}</span>
              {cal.weeks.flat().map((day, i) => {
                if (!day) return <span key={i} />;
                const dp = picker.getDayProps(day, cal.month);
                return (
                  <button
                    key={i}
                    onClick={() => picker.handleDateClick(day)}
                    onMouseEnter={() => picker.handleDateHover(day)}
                    onMouseLeave={() => picker.handleDateHover(null)}
                  >
                    {dp.day}
                  </button>
                );
              })}
            </div>
          ))}

          {/* Presets */}
          {picker.presets.map((preset, i) => (
            <button
              key={i}
              onClick={() => picker.handlePresetClick(preset)}
              style={{ fontWeight: i === picker.activePresetIndex ? "bold" : "normal" }}
            >
              {preset.label}
            </button>
          ))}

          <button onClick={picker.handleConfirm}>{picker.locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

const presets = [
  { label: "Today", value: { start: new Date(), end: new Date() } },
  {
    label: "Last 30 days",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 29);
      return { start, end };
    },
  },
];