Date Picker

1import * as React from 'react'
2import { format } from 'date-fns'
3import { CalendarIcon } from 'lucide-react'
4import { cn } from '@/lib/utils'
5import { Button } from '@/components/ui/button'
6import { Calendar } from '@/components/ui/calendar'
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from '@/components/ui/popover'
12 
13export interface DatePickerProps {
14  value?: Date
15  onChange?: (date: Date | undefined) => void
16  placeholder?: string
17  /** date-fns format string for the trigger label. */
18  dateFormat?: string
19  disabled?: boolean
20  className?: string
21}
22 
23/** A single-date picker: a button trigger that opens a calendar in a popover. */
24export function DatePicker({
25  value,
26  onChange,
27  placeholder = 'Pick a date',
28  dateFormat = 'LLL dd, y',
29  disabled,
30  className,
31}: DatePickerProps) {
32  const [open, setOpen] = React.useState(false)
33  const isControlled = value !== undefined
34  const [uncontrolled, setUncontrolled] = React.useState<Date | undefined>(value)
35 
36  const selected = isControlled ? value : uncontrolled
37 
38  const handleSelect = (date: Date | undefined) => {
39    if (!isControlled) setUncontrolled(date)
40    onChange?.(date)
41    setOpen(false)
42  }
43 
44  return (
45    <Popover open={open} onOpenChange={setOpen}>
46      <PopoverTrigger asChild>
47        <Button
48          variant="outline"
49          disabled={disabled}
50          className={cn(
51            'w-[260px] justify-start gap-2 font-bold normal-case',
52            !selected && 'text-muted-foreground',
53            className
54          )}
55        >
56          <CalendarIcon className="h-4 w-4" />
57          {selected ? format(selected, dateFormat) : placeholder}
58        </Button>
59      </PopoverTrigger>
60      <PopoverContent className="w-auto p-0" align="start">
61        <Calendar
62          mode="single"
63          selected={selected}
64          onSelect={handleSelect}
65          initialFocus
66        />
67      </PopoverContent>
68    </Popover>
69  )
70}