Date-range-picker

1import * as React from "react";
2import dayjs from "dayjs";
3import { Button } from "@/registry/default/button/button";
4import { Calendar } from "@/registry/default/calendar/calendar";
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/registry/default/popover/popover";
10import { cn } from "@/lib/utils";
11
12import type { DateRange } from "react-day-picker";
13
14import { HugeiconsIcon } from "@hugeicons/react";
15import { Calendar01Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
16export interface DateRangePickerProps {
17  value?: DateRange;
18  onSelect?: (range: DateRange | undefined) => void;
19  placeholder?: string;
20  className?: string;
21  disabled?: boolean;
22  format?: string;
23  numberOfMonths?: number;
24  fixedWeeks?: boolean;
25}
26
27export function DateRangePicker({
28  value,
29  onSelect,
30  placeholder = "Select date range",
31  className,
32  disabled = false,
33  format = "DD MMM YYYY",
34  numberOfMonths = 1,
35  fixedWeeks = false,
36}: DateRangePickerProps) {
37  const [open, setOpen] = React.useState(false);
38  const [tempRange, setTempRange] = React.useState<DateRange | undefined>(
39    undefined,
40  );
41  const [hoverDate, setHoverDate] = React.useState<Date | undefined>(undefined);
42  const previousTempRangeRef = React.useRef<DateRange | undefined>(undefined);
43
44  React.useEffect(() => {
45    if (open) {
46      setTempRange(value);
47      previousTempRangeRef.current = value;
48      setHoverDate(undefined);
49    }
50  }, [open, value]);
51
52  const formatDateRange = () => {
53    if (!value?.from) return placeholder;
54    if (!value.to) return dayjs(value.from).format(format);
55    return `${dayjs(value.from).format(format)} - ${dayjs(value.to).format(format)}`;
56  };
57
58  const displayRange = React.useMemo(() => {
59    if (tempRange?.from && !tempRange?.to && hoverDate) {
60      const start = tempRange.from;
61      const end = hoverDate;
62      if (start.getTime() <= end.getTime()) {
63        return { from: start, to: end };
64      } else {
65        return { from: end, to: start };
66      }
67    }
68    return tempRange;
69  }, [tempRange, hoverDate]);
70
71  const handleSelect = (range: DateRange | undefined) => {
72    const prevRange = previousTempRangeRef.current;
73
74    setHoverDate(undefined);
75
76    if (!range?.from) {
77      return;
78    }
79
80    if (prevRange?.from && prevRange?.to) {
81      if (range?.from && range?.to) {
82        if (range.from.getTime() === range.to.getTime()) {
83// … truncated