Calendar

const [date, setDate] = useState<Date | undefined>(new Date());

<Calendar
  mode="single"
  selected={date}
  onSelect={(newDate) => setDate(newDate as Date | undefined)}
  className="rounded-lg border shadow"
/>
{date && (
  <p className="mt-4 text-sm text-gray-600">
    Selected: {date.toDateString()}
  </p>
)}

const [dates, setDates] = useState<Date[]>([]);

<Calendar
  mode="multiple"
  selected={dates}
  onSelect={(newDates) => setDates(newDates as Date[])}
  className="rounded-lg border shadow"
/>
{dates.length > 0 && (
  <div className="mt-4 text-sm text-gray-600">
    <p>Selected dates ({dates.length}):</p>
    <ul className="list-disc list-inside max-h-32 overflow-y-auto">
      {dates.map(date => (
        <li key={date.toISOString()}>{date.toDateString()}</li>
      ))}
    </ul>
  </div>
)}

const [range, setRange] = useState<{ from: Date; to?: Date } | undefined>();

<Calendar
  mode="range"
  selected={range}
  onSelect={(newRange) => setRange(newRange as { from: Date; to?: Date } | undefined)}
  className="rounded-lg border shadow"
/>
{range && (
  <div className="mt-4 text-sm text-gray-600">
    <p>Selected range:</p>
    <p>From: {range.from.toDateString()}</p>
    {range.to && <p>To: {range.to.toDateString()}</p>}
  </div>
)}

<Calendar
  mode="single"
  selected={date}
  onSelect={(newDate) => setDate(newDate as Date | undefined)}
  disabled={(date) => {
    const day = date.getDay();
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return day === 0 || day === 6 || date < today; // Disable weekends and past dates
  }}
  className="rounded-lg border shadow"
/>