calendar-constraints-demo

1import { useState } from "react";
2import { AnimatedCalendar } from "@/registry/default/ui/calender";
3 
4export default function CalendarConstraintsDemo() {
5  const [date, setDate] = useState<Date>();
6 
7  // Disable weekends and past dates
8  const today = new Date();
9  today.setHours(0, 0, 0, 0);
10 
11  return (
12    <div className="flex flex-col gap-3">
13      <h3 className="font-medium text-sm">Calendar with Constraints</h3>
14      <p className="text-muted-foreground text-xs">
15        Weekends and past dates are disabled
16      </p>
17      <AnimatedCalendar
18        mode="single"
19        value={date}
20        onChange={setDate}
21        minDate={today}
22        disabledDaysOfWeek={[0, 6]} // Disable Sunday (0) and Saturday (6)
23        placeholder="Select a weekday"
24      />
25      {date && (
26        <p className="text-muted-foreground text-sm">
27          Selected: {date.toLocaleDateString()}
28        </p>
29      )}
30    </div>
31  );
32}