Date Picker

1import * as React from "react"
2import { format } from "date-fns"
3import { ChevronDownIcon } from "lucide-react"
4 
5import { cn } from "@/registry/lib/surface"
6import { Button } from "@/registry/ui/button"
7import { Calendar } from "@/registry/ui/calendar"
8import {
9  Popover,
10  PopoverContent,
11  PopoverTrigger,
12} from "@/registry/ui/popover"
13 
14type DatePickerProps = {
15  date?: Date
16  onDateChange?: (date: Date | undefined) => void
17  placeholder?: string
18  className?: string
19  align?: React.ComponentProps<typeof PopoverContent>["align"]
20} & Omit<React.ComponentProps<typeof Button>, "value" | "defaultValue">
21 
22function DatePicker({
23  date,
24  onDateChange,
25  placeholder = "pick a date",
26  className,
27  align = "start",
28  variant = "outline",
29  ...buttonProps
30}: DatePickerProps) {
31  const [open, setOpen] = React.useState(false)
32 
33  return (
34    <Popover open={open} onOpenChange={setOpen}>
35      <PopoverTrigger
36        render={
37          <Button
38            variant={variant}
39            data-empty={!date}
40            className={cn(
41              "w-[212px] justify-between font-normal data-[empty=true]:text-muted-foreground",
42              className
43            )}
44            {...buttonProps}
45          />
46        }
47      >
48        {date ? format(date, "PPP") : <span>{placeholder}</span>}
49        <ChevronDownIcon className="size-4 stroke-[1.5]" />
50      </PopoverTrigger>
51      <PopoverContent className="w-auto p-0" align={align}>
52        <Calendar
53          mode="single"
54          selected={date}
55          defaultMonth={date}
56          onSelect={(next) => {
57            onDateChange?.(next)
58            setOpen(false)
59          }}
60        />
61      </PopoverContent>
62    </Popover>
63  )
64}
65 
66export { DatePicker }