calendar-range-selection-minimum-and-maximum-days-block

1"use client";
2
3import { useState } from "react";
4import { DateRange } from "react-day-picker";
5
6import { Calendar } from "@/registry/pure-ui/ui/calendar";
7
8export function Calendar6Block() {
9  const [dateRange, setDateRange] = useState<DateRange | undefined>({
10    from: new Date(2025, 5, 18),
11    to: new Date(2025, 6, 7),
12  });
13
14  return (
15    <div className="flex flex-col gap-2 items-center justify-center p-5 min-h-[500px]">
16      <Calendar
17        animate
18        mode="range"
19        defaultMonth={dateRange?.from}
20        selected={dateRange}
21        onSelect={setDateRange}
22        numberOfMonths={2}
23        min={2}
24        max={20}
25      />
26      <div className="text-muted-foreground text-center text-xs">
27        Your stay must be between 2 and 20 nights
28      </div>
29    </div>
30  );
31}