Range Picker

Build a fully customized DateRangePicker with compound components. This example combines a custom trigger, preset sidebar, dual calendar grids, and a footer — all composed from individual parts.

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind4";

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, onToggle, triggerRef }) => (
          <button
            ref={triggerRef as React.Ref<HTMLButtonElement>}
            onClick={onToggle}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 14px",
              border: "1px solid #d1d5db",
              borderRadius: 6,
              background: "#fff",
              cursor: "pointer",
              fontSize: 14,
            }}
          >
            <span>{displayValue || "Select date range"}</span>
          </button>
        )}
      </DateRangePicker.Trigger>
      <DateRangePicker.Content>
        <DateRangePicker.Presets>
          {presets.map((_, i) => (
            <DateRangePicker.PresetItem key={i} 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>
      </DateRangePicker.Content>
    </DateRangePicker.Root>
  );
}

Inline with Presets

Display the range picker inline with a presets sidebar:

import { useState } from "react";
import { DateRangePicker } from "react-date-range-picker-tailwind4";

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>
  );
}

March 2026

April 2026