Date Picker

1"use client";
2 
3import { format } from "date-fns";
4import { Calendar as CalendarIcon } from "lucide-react";
5import { useState } from "react";
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8import { Calendar } from "@/components/ui/calendar";
9import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
10 
11export interface DatePickerProps {
12  date?: Date;
13  onDateChange?: (date: Date | undefined) => void;
14  placeholder?: string;
15  className?: string;
16  disabled?: boolean;
17  align?: "start" | "center" | "end";
18  /** `date-fns` pattern, default `PPP` */
19  formatPattern?: string;
20}
21 
22export function DatePicker({
23  date,
24  onDateChange,
25  placeholder = "Pick a date",
26  className,
27  disabled,
28  align = "start",
29  formatPattern = "PPP",
30}: DatePickerProps) {
31  const [open, setOpen] = useState(false);
32 
33  return (
34    <Popover open={open} onOpenChange={setOpen}>
35      <PopoverTrigger asChild>
36        <Button
37          type="button"
38          variant="glass"
39          disabled={disabled}
40          className={cn(
41            "min-w-[240px] justify-start text-left font-normal",
42            !date && "text-current/55",
43            className,
44          )}
45        >
46          <CalendarIcon className="size-4 shrink-0 opacity-70" aria-hidden />
47          {date ? format(date, formatPattern) : placeholder}
48        </Button>
49      </PopoverTrigger>
50      <PopoverContent className="w-auto p-0" align={align}>
51        <Calendar
52          mode="single"
53          selected={date}
54          onSelect={(d) => {
55            onDateChange?.(d);
56            setOpen(false);
57          }}
58          autoFocus
59        />
60      </PopoverContent>
61    </Popover>
62  );
63}