Date Range Picker

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { format, subDays, startOfMonth, endOfMonth, subMonths, isSameDay } from 'date-fns'
4import { CalendarIcon } from 'lucide-react'
5import type { DateRange } from 'react-day-picker'
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 
15export interface DateRangePickerPreset {
16  label: string
17  value: DateRange
18}
19 
20export interface DateRangePickerProps {
21  value?: DateRange
22  defaultValue?: DateRange
23  onChange?: (range: DateRange | undefined) => void
24  numberOfMonths?: 1 | 2
25  presets?: DateRangePickerPreset[]
26  showPresets?: boolean
27  minDate?: Date
28  maxDate?: Date
29  disabled?: boolean
30  placeholder?: string
31  align?: 'start' | 'center' | 'end'
32  className?: string
33}
34 
35const getDefaultPresets = (): DateRangePickerPreset[] => {
36  const today = new Date()
37  const lastMonth = subMonths(today, 1)
38 
39  return [
40    {
41      label: 'Today',
42      value: { from: today, to: today },
43    },
44    {
45      label: 'Last 7 days',
46      value: { from: subDays(today, 6), to: today },
47    },
48    {
49      label: 'Last 30 days',
50      value: { from: subDays(today, 29), to: today },
51    },
52    {
53      label: 'This month',
54      value: { from: startOfMonth(today), to: today },
55    },
56    {
57      label: 'Last month',
58      value: { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) },
59    },
60  ]
61}
62 
63const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(
64  (
65    {
66      value: controlledValue,
67      defaultValue,
68      onChange,
69      numberOfMonths = 2,
70      presets,
71      showPresets = true,
72      minDate,
73      maxDate,
74      disabled = false,
75      placeholder = 'Pick a date range',
76      align = 'start',
77      className,
78    },
79    ref
80  ) => {
81    const [open, setOpen] = React.useState(false)
82    const [uncontrolledValue, setUncontrolledValue] = React.useState<DateRange | undefined>(defaultValue)
83 
84    const isControlled = controlledValue !== undefined
85    const selectedRange = isControlled ? controlledValue : uncontrolledValue
86 
87    const resolvedPresets = presets ?? getDefaultPresets()
88 
89    const handleSelect = (range: DateRange | undefined) => {
90      if (!isControlled) {
91        setUncontrolledValue(range)
92      }
93      onChange?.(range)
94    }
95 
96// … truncated