New date picker for events form

2025-02-07 12:23:08 +01:00
parent 49d3817339
commit 535b32317e
5 changed files with 407 additions and 91 deletions
--- a/frontend/components/date-time-picker.tsx
+++ b/frontend/components/date-time-picker.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react";
+import { format } from "date-fns";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface DateTimePickerProps {
+	onDateSelectChange: (selectedDate: Date | undefined) => void;
+}
+
+export function DateTimePicker({
+	onDateSelectChange
+}: DateTimePickerProps) {
+	const [date, setDate] = React.useState<Date>();
+	const [isOpen, setIsOpen] = React.useState(false); 
+	// TODO : this is buggy as hell
+
+	const hours = Array.from({ length: 24 }, (_, i) => i);
+	const handleDateSelect = (selectedDate: Date | undefined) => {
+		if (selectedDate) {
+			setDate(selectedDate);
+			onDateSelectChange(selectedDate)
+		}
+	};
+
+	const handleTimeChange = (
+		type: "hour" | "minute",
+		value: string
+	) => {
+		if (date) {
+			const newDate = new Date(date);
+			if (type === "hour") {
+				newDate.setHours(parseInt(value));
+			} else if (type === "minute") {
+				newDate.setMinutes(parseInt(value));
+			}
+			setDate(newDate);
+		}
+	};
+
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn(
+						"w-fit justify-start text-left font-normal",
+						!date && "text-muted-foreground"
+					)}
+				>
+					{/*<CalendarIcon className="mr-2 h-4 w-4" />*/}
+					<p className="w-full">  {date ? (
+						format(date, "MM/dd/yyyy hh:mm")
+					) : (
+						<span>MM/DD/YYYY hh:mm</span>
+					)} </p>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0">
+				<div className="sm:flex">
+					<Calendar
+						mode="single"
+						selected={date}
+						onSelect={handleDateSelect}
+						initialFocus
+					/>
+					<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{hours.reverse().map((hour) => (
+									<Button
+										key={hour}
+										size="icon"
+										variant={date && date.getHours() === hour ? "default" : "ghost"}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("hour", hour.toString())}
+									>
+										{hour}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+									<Button
+										key={minute}
+										size="icon"
+										variant={date && date.getMinutes() === minute ? "default" : "ghost"}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("minute", minute.toString())}
+									>
+										{minute.toString().padStart(2, '0')}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}