115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|