Date Picker

1"use client"
2 
3import * as React from "react"
4import { CalendarIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { Calendar } from "@/components/ui/calendar"
9import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
10 
11function DatePicker({
12  value,
13  defaultValue,
14  onValueChange,
15  placeholder = "Pick a date",
16  disabled,
17  className,
18}: {
19  value?: Date
20  defaultValue?: Date
21  onValueChange?: (date: Date | undefined) => void
22  placeholder?: string
23  disabled?: boolean
24  className?: string
25}) {
26  const [open, setOpen] = React.useState(false)
27  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue)
28  const selected = value ?? internal
29 
30  function handleSelect(date: Date | undefined) {
31    if (value === undefined) setInternal(date)
32    onValueChange?.(date)
33    if (date) setOpen(false)
34  }
35 
36  return (
37    <Popover open={open} onOpenChange={setOpen}>
38      <PopoverTrigger
39        render={
40          <Button
41            variant="outline"
42            disabled={disabled}
43            data-empty={!selected}
44            className={cn(
45              "w-56 justify-start font-normal data-[empty=true]:text-muted-foreground",
46              className
47            )}
48          >
49            <CalendarIcon data-icon="inline-start" />
50            {selected
51              ? selected.toLocaleDateString(undefined, {
52                  year: "numeric",
53                  month: "long",
54                  day: "numeric",
55                })
56              : placeholder}
57          </Button>
58        }
59      />
60      <PopoverContent className="w-auto p-0" align="start">
61        <Calendar mode="single" selected={selected} onSelect={handleSelect} autoFocus />
62      </PopoverContent>
63    </Popover>
64  )
65}
66 
67export { DatePicker }