Date Picker

1"use client";
2 
3import * as React from "react";
4import { CalendarDays, X } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8import { Calendar } from "@/components/ui/calendar";
9import {
10  Popover,
11  PopoverContent,
12  PopoverTrigger,
13} from "@/components/ui/popover";
14 
15function DatePicker({
16  value,
17  defaultValue,
18  onValueChange,
19  placeholder = "Pick a date",
20  locale = "en-US",
21  disabled,
22  clearable = false,
23  className,
24}: {
25  value?: Date;
26  defaultValue?: Date;
27  onValueChange?: (date: Date | undefined) => void;
28  placeholder?: string;
29  locale?: string;
30  disabled?: boolean;
31  clearable?: boolean;
32  className?: string;
33}) {
34  const [open, setOpen] = React.useState(false);
35  const [internalValue, setInternalValue] = React.useState<Date | undefined>(
36    defaultValue,
37  );
38  const selected = value ?? internalValue;
39 
40  function update(next: Date | undefined) {
41    if (value === undefined) setInternalValue(next);
42    onValueChange?.(next);
43    if (next) setOpen(false);
44  }
45 
46  return (
47    <div data-slot="date-picker" className={cn("relative w-full", className)}>
48      <Popover open={open} onOpenChange={setOpen}>
49        <PopoverTrigger asChild>
50          <Button
51            disabled={disabled}
52            variant="outline"
53            className={cn(
54              "h-11.5 w-full justify-start px-4 text-left font-medium hover:-translate-y-0",
55              !selected && "text-muted-foreground",
56              clearable && selected && "pr-11",
57            )}
58          >
59            <CalendarDays className="text-primary" />
60            {selected
61              ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(
62                  selected,
63                )
64              : placeholder}
65          </Button>
66        </PopoverTrigger>
67        <PopoverContent align="start" className="w-auto p-0">
68          <Calendar
69            mode="single"
70            selected={selected}
71            onSelect={update}
72            autoFocus
73          />
74        </PopoverContent>
75      </Popover>
76      {clearable && selected && !disabled && (
77        <button
78          type="button"
79          aria-label="Clear date"
80          className="absolute right-2 top-1/2 z-10 grid size-7 -translate-y-1/2 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[.055] hover:text-foreground"
81          onClick={() => update(undefined)}
82        >
83          <X className="size-3.5" />
84// … truncated