"use client";

import * as React from "react";

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

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

export interface DateTimePickerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: Date | null;
  onChange?: (date: Date | null) => 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 formatDisplayDateTime = (date: Date) => {
  const dateStr = date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
  const timeStr = date.toLocaleTimeString("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  });
  return `${dateStr} at ${timeStr}`;
};

const padZero = (num: number) => num.toString().padStart(2, "0");

export const DateTimePicker = React.forwardRef<
  HTMLDivElement,
  DateTimePickerProps
>(
  (
    { className, value, onChange, placeholder = "Select date and time" },
    ref
  ) => {
    const [isOpen, setIsOpen] = React.useState(false);
    const [currentMonth, setCurrentMonth] = React.useState(() => new Date());
    const [internalValue, setInternalValue] = React.useState<Date | null>(null);
    const [timeHour, setTimeHour] = React.useState("12");
    const [timeMinute, setTimeMinute] = React.useState("00");
    const containerRef = React.useRef<HTMLDivElement>(null);

    const selectedDate = value !== undefined ? value : internalValue;

    const updateValue = React.useCallback(
      (nextDate: Date | null) => {
        if (value === undefined) {
          setInternalValue(nextDate);
        }
        onChange?.(nextDate);
      },
      [onChange, value]
    );

    React.useEffect(() => {
      if (selectedDate) {
        setTimeHour(padZero(selectedDate.getHours()));
        setTimeMinute(padZero(selectedDate.getMinutes()));
      }
    }, [selectedDate]);

    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) => {
      const hour = parseInt(timeHour, 10) || 0;
      const minute = parseInt(timeMinute, 10) || 0;
      const newDate = new Date(
        day.getFullYear(),
        day.getMonth(),
        day.getDate(),
        hour,
        minute
      );
      updateValue(newDate);
    };

    const handleTimeChange = (newHour: string, newMinute: string) => {
      setTimeHour(newHour);
      setTimeMinute(newMinute);

      if (selectedDate) {
        const hour = parseInt(newHour, 10) || 0;
        const minute = parseInt(newMinute, 10) || 0;
        const newDate = new Date(selectedDate);
        newDate.setHours(hour, minute);
        updateValue(newDate);
      }
    };

    const displayValue = selectedDate
      ? formatDisplayDateTime(selectedDate)
      : 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",
              selectedDate ? "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="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 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 isSelected = selectedDate
                  ? isSameDay(day, selectedDate)
                  : 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",
                      isSelected && "bg-primary text-primary-foreground"
                    )}
                  >
                    {day.getDate()}
                  </button>
                );
              })}
            </div>

            <div className="mt-4 border-t border-border pt-4">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm text-muted-foreground">Time:</span>
                <div className="flex items-center gap-1">
                  <input
                    type="text"
                    value={timeHour}
                    onChange={(e) => {
                      const val = e.target.value.replace(/\D/g, "").slice(0, 2);
                      handleTimeChange(val, timeMinute);
                    }}
                    onBlur={() => {
                      const num = Math.min(23, Math.max(0, parseInt(timeHour, 10) || 0));
                      handleTimeChange(padZero(num), timeMinute);
                    }}
                    className="w-10 rounded-md border border-border bg-background px-2 py-1 text-center text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                    placeholder="HH"
                  />
                  <span className="text-muted-foreground">:</span>
                  <input
                    type="text"
                    value={timeMinute}
                    onChange={(e) => {
                      const val = e.target.value.replace(/\D/g, "").slice(0, 2);
                      handleTimeChange(timeHour, val);
                    }}
                    onBlur={() => {
                      const num = Math.min(59, Math.max(0, parseInt(timeMinute, 10) || 0));
                      handleTimeChange(timeHour, padZero(num));
                    }}
                    className="w-10 rounded-md border border-border bg-background px-2 py-1 text-center text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                    placeholder="MM"
                  />
                </div>
              </div>
            </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={() => {
                  updateValue(null);
                  setTimeHour("12");
                  setTimeMinute("00");
                }}
              >
                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>
    );
  }
);

DateTimePicker.displayName = "DateTimePicker";
Date Time Picker

Dependencies

Files

Installation
