Date Range 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 
7export interface DateRange {
8  from: string; // 'YYYY-MM-DD'
9  to: string; // 'YYYY-MM-DD'
10}
11 
12interface DateRangePickerProps {
13  value: DateRange;
14  onChange: (value: DateRange) => void;
15  placeholder?: string;
16  className?: string;
17  min?: string; // 'YYYY-MM-DD'
18  id?: string;
19}
20 
21function toLocalDate(value: string): Date | null {
22  if (!value) return null;
23  const [y, m, d] = value.split("-").map(Number);
24  return new Date(y, m - 1, d);
25}
26 
27function toValue(date: Date): string {
28  const y = date.getFullYear();
29  const m = String(date.getMonth() + 1).padStart(2, "0");
30  const d = String(date.getDate()).padStart(2, "0");
31  return `${y}-${m}-${d}`;
32}
33 
34function addDays(date: Date, days: number): Date {
35  const d = new Date(date);
36  d.setDate(d.getDate() + days);
37  return d;
38}
39 
40function addMonths(date: Date, months: number): Date {
41  return new Date(date.getFullYear(), date.getMonth() + months, 1);
42}
43 
44// Monday-start week helpers
45function startOfWeek(date: Date): Date {
46  const d = new Date(date);
47  const day = d.getDay(); // 0 = Sun ... 6 = Sat
48  const diff = day === 0 ? -6 : 1 - day;
49  return addDays(d, diff);
50}
51 
52function endOfWeek(date: Date): Date {
53  return addDays(startOfWeek(date), 6);
54}
55 
56function startOfMonth(date: Date): Date {
57  return new Date(date.getFullYear(), date.getMonth(), 1);
58}
59 
60function endOfMonth(date: Date): Date {
61  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
62}
63 
64function startOfYear(date: Date): Date {
65  return new Date(date.getFullYear(), 0, 1);
66}
67 
68function endOfYear(date: Date): Date {
69  return new Date(date.getFullYear(), 11, 31);
70}
71 
72function isSameDay(a: Date | null, b: Date | null): boolean {
73  if (!a || !b) return false;
74  return (
75    a.getFullYear() === b.getFullYear() &&
76    a.getMonth() === b.getMonth() &&
77    a.getDate() === b.getDate()
78  );
79}
80 
81function stripTime(date: Date): Date {
82  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
83}
84 
85function formatDisplay(date: Date): string {
86  const d = String(date.getDate()).padStart(2, "0");
87  const m = String(date.getMonth() + 1).padStart(2, "0");
88  const y = date.getFullYear();
89  return `${d}/${m}/${y}`;
90}
91 
92const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
93 
94interface Preset {
95  label: string;
96  range: () => DateRange;
97}
98 
99// … truncated