Date Picker (AD)

1"use client";
2 
3import { useState, useRef, useEffect, useMemo, useCallback } from "react";
4import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7interface DatePickerProps {
8  value: string; // 'YYYY-MM-DD'
9  onChange: (value: string) => void;
10  placeholder?: string;
11  className?: string;
12  min?: string; // 'YYYY-MM-DD'
13  id?: string;
14}
15 
16function toLocalDate(value: string): Date | null {
17  if (!value) return null;
18  const [y, m, d] = value.split("-").map(Number);
19  const date = new Date(y, m - 1, d);
20  return isNaN(date.getTime()) ? null : date;
21}
22 
23function toValue(date: Date): string {
24  const y = date.getFullYear();
25  const m = String(date.getMonth() + 1).padStart(2, "0");
26  const d = String(date.getDate()).padStart(2, "0");
27  return `${y}-${m}-${d}`;
28}
29 
30function stripTime(date: Date): Date {
31  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
32}
33 
34function isSameDay(a: Date, b: Date): boolean {
35  return (
36    a.getFullYear() === b.getFullYear() &&
37    a.getMonth() === b.getMonth() &&
38    a.getDate() === b.getDate()
39  );
40}
41 
42const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
43 
44export function DatePicker({
45  value,
46  onChange,
47  placeholder = "Select date",
48  className,
49  min,
50  id,
51}: DatePickerProps) {
52  const minDate = toLocalDate(min || "");
53  const [open, setOpen] = useState(false);
54  const selected = toLocalDate(value);
55  const [monthNav, setMonthNav] = useState(0);
56  const wrapperRef = useRef<HTMLDivElement>(null);
57  const buttonRef = useRef<HTMLButtonElement>(null);
58  const [dropdownPos, setDropdownPos] = useState<{
59    top: number;
60    left: number;
61  } | null>(null);
62 
63  const updatePosition = useCallback(() => {
64    if (buttonRef.current) {
65      const rect = buttonRef.current.getBoundingClientRect();
66      setDropdownPos({ top: rect.bottom + 6, left: rect.left });
67    }
68  }, []);
69 
70  const viewDate = useMemo(() => {
71    const base = toLocalDate(value) || new Date();
72    return new Date(base.getFullYear(), base.getMonth() + monthNav, 1);
73  }, [value, monthNav]);
74 
75  useEffect(() => {
76    function handleClick(e: MouseEvent) {
77      if (
78        wrapperRef.current &&
79        !wrapperRef.current.contains(e.target as Node)
80      ) {
81        setOpen(false);
82      }
83    }
84    document.addEventListener("mousedown", handleClick);
85    return () => document.removeEventListener("mousedown", handleClick);
86  }, []);
87 
88  useEffect(() => {
89    if (!open) return;
90// … truncated