"use client";

import * as React from "react";

import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";

import { cn } from "@/lib/utils";

export type DateRange = {
  start: Date | null;
  end: Date | null;
};

export interface DateRangePickerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: DateRange;
  onChange?: (range: DateRange) => void;
  placeholder?: string;
}

const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const getMonthLabel = (date: Date) =>
  date.toLocaleDateString("en-GB", {
    month: "long",
    year: "numeric",
  });

const toDateKey = (date: Date) =>
  `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;

const isSameDay = (a: Date, b: Date) => toDateKey(a) === toDateKey(b);

const startOfDay = (date: Date) =>
  new Date(date.getFullYear(), date.getMonth(), date.getDate());

const addDays = (date: Date, days: number) => {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
};

const isWithinRange = (date: Date, start: Date, end: Date) => {
  const time = startOfDay(date).getTime();
  const startTime = startOfDay(start).getTime();
  const endTime = startOfDay(end).getTime();
  return time >= startTime && time <= endTime;
};

const formatDisplayDate = (date: Date) =>
  date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });

export const DateRangePicker = React.forwardRef<
  HTMLDivElement,
  DateRangePickerProps
>(({ className, value, onChange, placeholder = "Select date range" }, ref) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [currentMonth, setCurrentMonth] = React.useState(() => new Date());
  const [internalRange, setInternalRange] = React.useState<DateRange>({
    start: null,
    end: null,
  });
  const containerRef = React.useRef<HTMLDivElement>(null);

  const range = value ?? internalRange;

  const updateRange = React.useCallback(
    (nextRange: DateRange) => {
      if (!value) {
        setInternalRange(nextRange);
      }
      onChange?.(nextRange);
    },
    [onChange, value]
  );

  React.useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen]);

  const days = React.useMemo(() => {
    const year = currentMonth.getFullYear();
    const month = currentMonth.getMonth();
    const startOfMonth = new Date(year, month, 1);
    const endOfMonth = new Date(year, month + 1, 0);
    const startDay = startOfMonth.getDay();
    const daysInMonth = endOfMonth.getDate();

    return Array.from({ length: startDay + daysInMonth }, (_, index) => {
      if (index < startDay) {
        return null;
      }
      return new Date(year, month, index - startDay + 1);
    });
  }, [currentMonth]);

  const handleDaySelect = (day: Date) => {
    if (!range.start || (range.start && range.end)) {
      updateRange({ start: day, end: null });
      return;
    }

    if (range.start && !range.end) {
      if (day < range.start) {
        updateRange({ start: day, end: null });
        return;
      }
      const nextRange = { start: range.start, end: day };
      updateRange(nextRange);
      setIsOpen(false);
    }
  };

  const presets = React.useMemo(
    () => [
      {
        label: "Last 7 days",
        getRange: () => {
          const end = startOfDay(new Date());
          return { start: addDays(end, -6), end };
        },
      },
      {
        label: "Last 30 days",
        getRange: () => {
          const end = startOfDay(new Date());
          return { start: addDays(end, -29), end };
        },
      },
      {
        label: "This month",
        getRange: () => {
          const today = startOfDay(new Date());
          return {
            start: new Date(today.getFullYear(), today.getMonth(), 1),
            end: today,
          };
        },
      },
    ],
    []
  );

  const displayValue =
    range.start && range.end
      ? `${formatDisplayDate(range.start)} to ${formatDisplayDate(range.end)}`
      : placeholder;

  return (
    <div
      ref={(node) => {
        containerRef.current = node;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref) {
          ref.current = node;
        }
      }}
      className={cn("relative w-full max-w-sm", className)}
    >
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        className={cn(
          "flex w-full items-center justify-between gap-2 rounded-lg border border-border bg-background px-4 py-3 text-sm text-foreground",
          "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        )}
      >
        <span
          className={cn(
            "text-left",
            range.start && range.end
              ? "text-foreground"
              : "text-muted-foreground"
          )}
        >
          {displayValue}
        </span>
        <Calendar className="h-4 w-4 text-muted-foreground" />
      </button>

      {isOpen ? (
        <div className="absolute z-50 mt-2 w-full rounded-xl border border-border bg-card p-4 shadow-lg">
          <div className="space-y-3">
            <div className="flex flex-wrap gap-2">
              {presets.map((preset) => (
                <button
                  key={preset.label}
                  type="button"
                  className="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  onClick={() => {
                    const nextRange = preset.getRange();
                    updateRange(nextRange);
                    setCurrentMonth(nextRange.end ?? new Date());
                  }}
                >
                  {preset.label}
                </button>
              ))}
            </div>

            <div className="flex items-center justify-between">
              <button
                type="button"
                className="rounded-md border border-border p-2 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                onClick={() =>
                  setCurrentMonth(
                    (prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)
                  )
                }
              >
                <ChevronLeft className="h-4 w-4" />
              </button>
              <p className="text-sm font-semibold text-foreground">
                {getMonthLabel(currentMonth)}
              </p>
              <button
                type="button"
                className="rounded-md border border-border p-2 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                onClick={() =>
                  setCurrentMonth(
                    (prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)
                  )
                }
              >
                <ChevronRight className="h-4 w-4" />
              </button>
            </div>
          </div>

          <div className="mt-4 grid grid-cols-7 gap-1 text-xs text-muted-foreground">
            {WEEKDAYS.map((day) => (
              <span key={day} className="text-center">
                {day}
              </span>
            ))}
          </div>

          <div className="mt-2 grid grid-cols-7 gap-1">
            {days.map((day, index) => {
              if (!day) {
                return <span key={`empty-${index}`} />;
              }

              const isStart = range.start ? isSameDay(day, range.start) : false;
              const isEnd = range.end ? isSameDay(day, range.end) : false;
              const isInRange =
                range.start && range.end
                  ? isWithinRange(day, range.start, range.end)
                  : false;

              return (
                <button
                  key={toDateKey(day)}
                  type="button"
                  onClick={() => handleDaySelect(day)}
                  className={cn(
                    "flex h-9 w-9 items-center justify-center rounded-md text-sm transition",
                    "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                    isInRange && "bg-muted",
                    (isStart || isEnd) && "bg-accent text-primary"
                  )}
                >
                  {day.getDate()}
                </button>
              );
            })}
          </div>

          <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
            <span>
              {range.start
                ? formatDisplayDate(range.start)
                : "Select a start date"}
            </span>
            <span>
              {range.end ? formatDisplayDate(range.end) : "Select an end date"}
            </span>
          </div>

          <div className="mt-4 flex items-center justify-between">
            <button
              type="button"
              className="text-xs font-medium text-muted-foreground transition hover:text-foreground"
              onClick={() => updateRange({ start: null, end: null })}
            >
              Clear
            </button>
            <button
              type="button"
              className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              onClick={() => setIsOpen(false)}
            >
              Done
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
});

DateRangePicker.displayName = "DateRangePicker";
Date Range Picker

Dependencies

Files

Installation
