Range Picker

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

const presets = [
  { label: "Last 7 days", value: { start: new Date(Date.now() - 7 * 86400000), end: new Date() } },
  {
    label: "Last 30 days",
    value: { start: new Date(Date.now() - 30 * 86400000), end: new Date() },
  },
  {
    label: "This month",
    value: { start: new Date(new Date().getFullYear(), new Date().getMonth(), 1), end: new Date() },
  },
];

function CompoundRangePicker() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  return (
    <DateRangePicker.Root value={value} onChange={setValue} presets={presets}>
      <DateRangePicker.Trigger>
        {({ displayValue, isOpen, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 16px",
              border: "1px solid #d1d5db",
              borderRadius: 6,
              background: isOpen ? "#eff6ff" : "#fff",
              cursor: "pointer",
              fontSize: 14,
              fontWeight: 500,
            }}
          >
            <span>{displayValue || "Select date range"}</span>
          </button>
        )}
      </DateRangePicker.Trigger>
      <DateRangePicker.Content>
        <div style={{ display: "flex" }}>
          <DateRangePicker.Presets>
            {presets.map((p, i) => (
              <DateRangePicker.PresetItem key={p.label} index={i} />
            ))}
          </DateRangePicker.Presets>
          <div>
            <DateRangePicker.Header>
              <DateRangePicker.PrevButton />
              <DateRangePicker.Title calendarIndex={0} />
              <div style={{ flex: 1 }} />
              <DateRangePicker.Title calendarIndex={1} />
              <DateRangePicker.NextButton />
            </DateRangePicker.Header>
            <DateRangePicker.Calendars>
              <DateRangePicker.Grid calendarIndex={0} />
              <DateRangePicker.Grid calendarIndex={1} />
            </DateRangePicker.Calendars>
            <DateRangePicker.Footer>
              <DateRangePicker.ClearButton />
              <DateRangePicker.CancelButton />
              <DateRangePicker.ConfirmButton />
            </DateRangePicker.Footer>
          </div>
        </div>
      </DateRangePicker.Content>
    </DateRangePicker.Root>
  );
}

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

const presets = [
  { label: "Today", value: { start: new Date(), end: new Date() } },
  { label: "Last 7 days", value: { start: new Date(Date.now() - 7 * 86400000), end: new Date() } },
  {
    label: "Last 14 days",
    value: { start: new Date(Date.now() - 14 * 86400000), end: new Date() },
  },
  {
    label: "Last 30 days",
    value: { start: new Date(Date.now() - 30 * 86400000), end: new Date() },
  },
  {
    label: "This month",
    value: {
      start: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      end: new Date(),
    },
  },
];

function CompoundRangeInline() {
  const [value, setValue] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  return (
    <DateRangePicker.Root value={value} onChange={setValue} inline presets={presets}>
      <DateRangePicker.Content>
        <div style={{ display: "flex" }}>
          <DateRangePicker.Presets>
            {presets.map((p, i) => (
              <DateRangePicker.PresetItem key={p.label} index={i} />
            ))}
          </DateRangePicker.Presets>
          <div>
            <DateRangePicker.Header>
              <DateRangePicker.PrevButton />
              <DateRangePicker.Title calendarIndex={0} />
              <div style={{ flex: 1 }} />
              <DateRangePicker.Title calendarIndex={1} />
              <DateRangePicker.NextButton />
            </DateRangePicker.Header>
            <DateRangePicker.Calendars>
              <DateRangePicker.Grid calendarIndex={0} />
              <DateRangePicker.Grid calendarIndex={1} />
            </DateRangePicker.Calendars>
          </div>
        </div>
      </DateRangePicker.Content>
    </DateRangePicker.Root>
  );
}