"use client";

import * as React from "react";

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

export interface DateRange {
  start: Date | null;
  end: Date | null;
}

export type DatePickerValue = Date | DateRange | null;

export interface DatePickerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value"> {
  value?: DatePickerValue;
  defaultValue?: DatePickerValue;
  onChange?: (date: DatePickerValue) => void;
  placeholder?: string;
  minDate?: Date;
  maxDate?: Date;
  yearRange?: { start: number; end: number };
  mode?: "single" | "range";
}

const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const MONTHS = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

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 formatDisplayDate = (date: Date) =>
  date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });

const isBefore = (date: Date, compare?: Date) => {
  if (!compare) return false;
  return startOfDay(date).getTime() < startOfDay(compare).getTime();
};

const isAfter = (date: Date, compare?: Date) => {
  if (!compare) return false;
  return startOfDay(date).getTime() > startOfDay(compare).getTime();
};

const getMonthDays = (month: Date) => {
  const year = month.getFullYear();
  const monthIndex = month.getMonth();
  const startOfMonth = new Date(year, monthIndex, 1);
  const endOfMonth = new Date(year, monthIndex + 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, monthIndex, index - startDay + 1);
  });
};

const getYearOptions = (current: number, range?: { start: number; end: number }) => {
  const start = range?.start ?? current - 6;
  const end = range?.end ?? current + 6;
  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
};

const isDateRange = (value: DatePickerValue): value is DateRange =>
  !!value && typeof value === "object" && "start" in value && "end" in value;

const isWithinRange = (date: Date, range: DateRange) => {
  if (!range.start || !range.end) return false;
  const time = startOfDay(date).getTime();
  return (
    time >= startOfDay(range.start).getTime() &&
    time <= startOfDay(range.end).getTime()
  );
};

export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
  (
    {
      className,
      value,
      defaultValue = null,
      onChange,
      placeholder,
      minDate,
      maxDate,
      yearRange,
      mode,
      ...props
    },
    ref
  ) => {
    const isControlled = value !== undefined;
    const [internalValue, setInternalValue] = React.useState<DatePickerValue>(
      defaultValue
    );
    const [open, setOpen] = React.useState(false);
    const selectedValue = isControlled ? value ?? null : internalValue;
    const selectionMode = mode ?? (isDateRange(selectedValue) ? "range" : "single");
    const selectedDate =
      selectionMode === "single" && selectedValue instanceof Date
        ? selectedValue
        : null;
    const selectedRange: DateRange =
      selectionMode === "range" && isDateRange(selectedValue)
        ? selectedValue
        : { start: null, end: null };

    const [currentMonth, setCurrentMonth] = React.useState<Date>(() => {
      const base =
        selectionMode === "range"
          ? selectedRange.start ?? new Date()
          : selectedDate ?? new Date();
      return new Date(base.getFullYear(), base.getMonth(), 1);
    });
    const containerRef = React.useRef<HTMLDivElement | null>(null);

    React.useEffect(() => {
      const activeDate =
        selectionMode === "range" ? selectedRange.start : selectedDate;
      if (!activeDate) return;
      setCurrentMonth(new Date(activeDate.getFullYear(), activeDate.getMonth(), 1));
    }, [selectedDate, selectedRange.start, selectionMode]);

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

      const handleKey = (event: KeyboardEvent) => {
        if (event.key === "Escape") {
          setOpen(false);
        }
      };

      document.addEventListener("mousedown", handlePointer);
      document.addEventListener("keydown", handleKey);

      return () => {
        document.removeEventListener("mousedown", handlePointer);
        document.removeEventListener("keydown", handleKey);
      };
    }, [open]);

    const updateDate = (next: DatePickerValue) => {
      if (!isControlled) {
        setInternalValue(next);
      }
      onChange?.(next);
    };

    const handleSelect = (day: Date) => {
      if (selectionMode === "range") {
        if (!selectedRange.start || selectedRange.end) {
          updateDate({ start: day, end: null });
          return;
        }

        if (startOfDay(day).getTime() < startOfDay(selectedRange.start).getTime()) {
          updateDate({ start: day, end: selectedRange.start });
        } else {
          updateDate({ start: selectedRange.start, end: day });
        }
        setOpen(false);
        return;
      }

      updateDate(day);
      setOpen(false);
    };

    const handleMonthChange = (monthIndex: number) => {
      setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
    };

    const handleYearChange = (year: number) => {
      setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
    };

    const days = React.useMemo(() => getMonthDays(currentMonth), [currentMonth]);
    const today = startOfDay(new Date());
    const years = React.useMemo(
      () => getYearOptions(currentMonth.getFullYear(), yearRange),
      [currentMonth, yearRange]
    );

    const isDisabled = (date: Date) =>
      isBefore(date, minDate) || isAfter(date, maxDate);

    const displayValue = selectedDate
      ? formatDisplayDate(selectedDate)
      : selectedRange.start && selectedRange.end
        ? `${formatDisplayDate(selectedRange.start)} to ${formatDisplayDate(
            selectedRange.end
          )}`
        : selectedRange.start
          ? `${formatDisplayDate(selectedRange.start)} to ...`
          : "";

    const resolvedPlaceholder =
      placeholder ?? (selectionMode === "range" ? "Select date range" : "Select date");

    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)}
        {...props}
      >
        <button
          type="button"
          onClick={() => setOpen((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",
            "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
          )}
          aria-haspopup="dialog"
          aria-expanded={open}
        >
          <span
            className={cn(
              "text-left",
              displayValue ? "text-foreground" : "text-muted-foreground"
            )}
          >
            {displayValue || resolvedPlaceholder}
          </span>
          <svg
            viewBox="0 0 20 20"
            className="h-4 w-4 text-muted-foreground"
            aria-hidden="true"
          >
            <rect
              x="3"
              y="4"
              width="14"
              height="13"
              rx="2"
              stroke="currentColor"
              strokeWidth="1.4"
              fill="none"
            />
            <path
              d="M6 3v3M14 3v3M3 8h14"
              stroke="currentColor"
              strokeWidth="1.4"
              strokeLinecap="round"
            />
          </svg>
        </button>

        {open ? (
          <div
            role="dialog"
            aria-label="Date picker"
            className="absolute z-20 mt-3 w-full rounded-xl border border-border bg-card p-4 shadow-sm"
          >
            <div className="flex items-center justify-between gap-2">
              <button
                type="button"
                onClick={() =>
                  setCurrentMonth(
                    new Date(
                      currentMonth.getFullYear(),
                      currentMonth.getMonth() - 1,
                      1
                    )
                  )
                }
                className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:bg-muted focus-visible:outline-none"
                aria-label="Previous month"
              >
                <svg
                  viewBox="0 0 20 20"
                  className="h-4 w-4"
                  aria-hidden="true"
                >
                  <path
                    d="M12.5 4.5 7.5 10l5 5.5"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>

              <div className="flex flex-1 items-center justify-center gap-2">
                <select
                  value={currentMonth.getMonth()}
                  onChange={(event) =>
                    handleMonthChange(Number(event.target.value))
                  }
                  className="rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none"
                  aria-label="Select month"
                >
                  {MONTHS.map((month, index) => (
                    <option key={month} value={index}>
                      {month}
                    </option>
                  ))}
                </select>
                <select
                  value={currentMonth.getFullYear()}
                  onChange={(event) =>
                    handleYearChange(Number(event.target.value))
                  }
                  className="rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none"
                  aria-label="Select year"
                >
                  {years.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
              </div>

              <button
                type="button"
                onClick={() =>
                  setCurrentMonth(
                    new Date(
                      currentMonth.getFullYear(),
                      currentMonth.getMonth() + 1,
                      1
                    )
                  )
                }
                className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:bg-muted focus-visible:outline-none"
                aria-label="Next month"
              >
                <svg
                  viewBox="0 0 20 20"
                  className="h-4 w-4"
                  aria-hidden="true"
                >
                  <path
                    d="M7.5 4.5 12.5 10l-5 5.5"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
            </div>

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

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

                const isToday = isSameDay(day, today);
                const disabled = isDisabled(day);
                const isRangeStart =
                  selectionMode === "range" &&
                  selectedRange.start &&
                  isSameDay(day, selectedRange.start);
                const isRangeEnd =
                  selectionMode === "range" &&
                  selectedRange.end &&
                  isSameDay(day, selectedRange.end);
                const isInRange =
                  selectionMode === "range" && isWithinRange(day, selectedRange);
                const isSingleSelected =
                  selectionMode === "single" && selectedDate && isSameDay(day, selectedDate);

                return (
                  <button
                    key={toDateKey(day)}
                    type="button"
                    onClick={() => handleSelect(day)}
                    disabled={disabled}
                    className={cn(
                      "flex h-9 w-9 items-center justify-center rounded-md text-sm text-foreground transition focus-visible:outline-none",
                      "hover:bg-muted",
                      isSingleSelected && "bg-muted text-primary",
                      isInRange && "bg-muted",
                      (isRangeStart || isRangeEnd) &&
                        "bg-primary text-primary-foreground",
                      !isSingleSelected && !isRangeStart && !isRangeEnd && isToday &&
                        "text-primary",
                      disabled && "cursor-not-allowed text-muted-foreground"
                    )}
                  >
                    {day.getDate()}
                  </button>
                );
              })}
            </div>

            <div className="mt-4 flex items-center justify-between">
              <button
                type="button"
                onClick={() =>
                  updateDate(
                    selectionMode === "range" ? { start: null, end: null } : null
                  )
                }
                className="text-xs text-muted-foreground transition hover:text-foreground focus-visible:outline-none"
              >
                Clear date
              </button>
              {displayValue ? (
                <span className="text-xs text-muted-foreground">{displayValue}</span>
              ) : null}
            </div>
          </div>
        ) : null}
      </div>
    );
  }
);

DatePicker.displayName = "DatePicker";
Date Picker

Dependencies

Files

Installation
