Dialog with Calendar and Time Picker

1'use client';
2 
3import { format } from 'date-fns';
4import { CalendarIcon } from 'lucide-react';
5import { useMemo, useState } from 'react';
6 
7import { Button } from '@/components/ui/button';
8import { Calendar } from '@/components/ui/calendar';
9import {
10  Dialog,
11  DialogClose,
12  DialogContent,
13  DialogHeader,
14  DialogTitle,
15  DialogTrigger,
16} from '@/components/ui/dialog';
17import { Input } from '@/components/ui/input';
18import { Label } from '@/components/ui/label';
19import {
20  Popover,
21  PopoverContent,
22  PopoverTrigger,
23} from '@/components/ui/popover';
24import {
25  Select,
26  SelectContent,
27  SelectItem,
28  SelectTrigger,
29  SelectValue,
30} from '@/components/ui/select';
31import { Textarea } from '@/components/ui/textarea';
32import { cn } from '@/lib/utils';
33 
34export default function Dialog10() {
35  const [open, setOpen] = useState(true);
36  const [date, setDate] = useState<Date | undefined>(new Date());
37  const [startTime, setStartTime] = useState('09:00');
38 
39  const timeOptions = useMemo(() => {
40    const options = [];
41    for (let hour = 0; hour <= 23; hour++) {
42      for (let minute = 0; minute < 60; minute += 30) {
43        const formattedHour = hour.toString().padStart(2, '0');
44        const formattedMinute = minute.toString().padStart(2, '0');
45        const value = `${formattedHour}:${formattedMinute}`;
46        const tempDate = new Date(2000, 0, 1, hour, minute);
47        const label = format(tempDate, 'h:mm a');
48        options.push({ value, label });
49      }
50    }
51 
52    if (!options.find((opt) => opt.value === '23:59')) {
53      const endOfDay = new Date(2000, 0, 1, 23, 59);
54      options.push({ value: '23:59', label: format(endOfDay, 'h:mm a') });
55    }
56 
57    return options;
58  }, []);
59 
60  return (
61    <Dialog onOpenChange={setOpen} open={open}>
62      <DialogTrigger render={<Button />}>Show dialog</DialogTrigger>
63      <DialogContent className="gap-0 p-0 sm:max-w-lg">
64        <DialogHeader className="border-b px-6 py-4 pt-5">
65          <DialogTitle>Schedule a Meeting</DialogTitle>
66        </DialogHeader>
67 
68        <form action="#" method="POST">
69          <div className="space-y-6 p-6">
70            <div className="space-y-2">
71              <Label htmlFor="title">Meeting Title</Label>
72              <Input
73                id="title"
74                name="title"
75                placeholder="e.g., Project Kickoff"
76              />
77            </div>
78 
79            <div className="space-y-2">
80              <Label htmlFor="attendees">Attendees</Label>
81              <Input
82// … truncated