date-picker

1"use client"
2 
3import * as React from "react"
4import { Popover as BasePopover } from "@base-ui/react/popover"
5import { ChevronLeft, ChevronRight, Calendar } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] as const
9 
10function getDaysInMonth(year: number, month: number) {
11    return new Date(year, month + 1, 0).getDate()
12}
13 
14function getFirstDayOfMonth(year: number, month: number) {
15    return new Date(year, month, 1).getDay()
16}
17 
18function formatDate(date: Date) {
19    return date.toLocaleDateString("en-US", {
20        month: "short",
21        day: "numeric",
22        year: "numeric",
23    })
24}
25 
26function getMonthName(month: number) {
27    return new Date(2000, month).toLocaleDateString("en-US", { month: "long" })
28}
29 
30function isSameDay(a: Date | null, b: Date | null) {
31    if (!a || !b) return false
32    return (
33        a.getFullYear() === b.getFullYear() &&
34        a.getMonth() === b.getMonth() &&
35        a.getDate() === b.getDate()
36    )
37}
38 
39function isToday(date: Date) {
40    return isSameDay(date, new Date())
41}
42 
43interface DatePickerProps {
44    value?: Date | null
45    onChange?: (date: Date | null) => void
46    placeholder?: string
47    disabled?: boolean
48    className?: string
49}
50 
51function DatePicker({
52    value = null,
53    onChange,
54    placeholder = "Select date",
55    disabled = false,
56    className,
57}: DatePickerProps) {
58    const [open, setOpen] = React.useState(false)
59    const [selectedDate, setSelectedDate] = React.useState<Date | null>(value)
60    const [pendingDate, setPendingDate] = React.useState<Date | null>(value)
61    const [displayMonth, setDisplayMonth] = React.useState(
62        value ? value.getMonth() : new Date().getMonth()
63    )
64    const [displayYear, setDisplayYear] = React.useState(
65        value ? value.getFullYear() : new Date().getFullYear()
66    )
67 
68    React.useEffect(() => {
69        setSelectedDate(value)
70        setPendingDate(value)
71    }, [value])
72 
73    const daysInMonth = getDaysInMonth(displayYear, displayMonth)
74    const firstDay = getFirstDayOfMonth(displayYear, displayMonth)
75 
76    const prevMonthDays = getDaysInMonth(
77        displayMonth === 0 ? displayYear - 1 : displayYear,
78        displayMonth === 0 ? 11 : displayMonth - 1
79    )
80 
81    const calendarDays: { day: number; month: number; year: number; isCurrentMonth: boolean }[] = []
82 
83    // Previous month trailing days
84    for (let i = firstDay - 1; i >= 0; i--) {
85// … truncated