calendar-time-demo

1import { useState } from "react";
2import { AnimatedCalendar } from "@/registry/default/ui/calender";
3 
4export default function CalendarTimeDemo() {
5  const [dateTime, setDateTime] = useState<Date>();
6 
7  return (
8    <div className="flex flex-col gap-3">
9      <h3 className="font-medium text-sm">Date & Time Selection</h3>
10      <AnimatedCalendar
11        mode="single"
12        value={dateTime}
13        onChange={setDateTime}
14        showTime
15        placeholder="Select date and time"
16      />
17      {dateTime && (
18        <p className="text-muted-foreground text-sm">
19          Selected: {dateTime.toLocaleString()}
20        </p>
21      )}
22    </div>
23  );
24}