Date Time Picker

1import { format } from "date-fns";
2import { CalendarIcon } from "lucide-react";
3import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
4import { Button } from "@/components/ui/button";
5import { Calendar } from "@/components/ui/calendar";
6import {
7  FormControl,
8  FormItem,
9  FormLabel,
10  FormMessage,
11} from "@/components/ui/form";
12import {
13  Popover,
14  PopoverContent,
15  PopoverTrigger,
16} from "@/components/ui/popover";
17import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
18import { cn } from "@/lib/utils";
19import { useCalendar } from "@/features/calendar/contexts/calendar-context";
20import type { TEventFormData } from "@/features/calendar/schemas";
21 
22interface DatePickerProps {
23  form: UseFormReturn<TEventFormData>;
24  field: ControllerRenderProps<TEventFormData, "endDate" | "startDate">;
25}
26 
27export function DateTimePicker({ form, field }: DatePickerProps) {
28  const { use24HourFormat } = useCalendar();
29 
30  function handleDateSelect(date: Date | undefined) {
31    if (date) {
32      form.setValue(field.name, date);
33    }
34  }
35 
36  function handleTimeChange(type: "hour" | "minute" | "ampm", value: string) {
37    const currentDate = form.getValues(field.name) || new Date();
38    const newDate = new Date(currentDate);
39 
40    if (type === "hour") {
41      newDate.setHours(parseInt(value, 10));
42    } else if (type === "minute") {
43      newDate.setMinutes(parseInt(value, 10));
44    } else if (type === "ampm") {
45      const hours = newDate.getHours();
46      if (value === "AM" && hours >= 12) {
47        newDate.setHours(hours - 12);
48      } else if (value === "PM" && hours < 12) {
49        newDate.setHours(hours + 12);
50      }
51    }
52 
53    form.setValue(field.name, newDate);
54  }
55 
56  return (
57    <FormItem className="flex flex-col">
58      <FormLabel>
59        {field.name === "startDate" ? "Start Date" : "End Date"}
60      </FormLabel>
61      <Popover modal={true}>
62        <PopoverTrigger asChild>
63          <FormControl>
64            <Button
65              variant={"outline"}
66              className={cn(
67                "w-full pl-3 text-left font-normal",
68                !field.value && "text-muted-foreground",
69              )}
70            >
71              {field.value ? (
72                format(
73                  field.value,
74                  use24HourFormat ? "MM/dd/yyyy HH:mm" : "MM/dd/yyyy hh:mm aa",
75                )
76              ) : (
77                <span>MM/DD/YYYY hh:mm aa</span>
78              )}
79// … truncated