calendar-range-demo

1import { useState } from "react";
2import { AnimatedCalendar } from "@/registry/default/ui/calender";
3 
4export default function CalendarRangeDemo() {
5  const [dateRange, setDateRange] = useState<{
6    from: Date | undefined;
7    to: Date | undefined;
8  }>();
9 
10  return (
11    <div className="flex flex-col gap-3">
12      <h3 className="font-medium text-sm">Date Range Selection</h3>
13      <AnimatedCalendar
14        mode="range"
15        value={dateRange}
16        onChange={setDateRange}
17        placeholder="Select date range"
18      />
19      {dateRange?.from && dateRange?.to && (
20        <p className="text-muted-foreground text-sm">
21          Selected: {dateRange.from.toLocaleDateString()} -{" "}
22          {dateRange.to.toLocaleDateString()}
23        </p>
24      )}
25    </div>
26  );
27}