Date Time Input

1"use client";
2 
3import { format } from "date-fns";
4import { CalendarIcon } from "lucide-react";
5import React from "react";
6import { Calendar } from "@/components/ui/calendar";
7import { Input } from "@/components/ui/input";
8import {
9  Popover,
10  PopoverContent,
11  PopoverTrigger,
12} from "@/components/ui/popover";
13import { cn } from "@/lib/utils";
14import { Button } from "@/registry/new-york/components/button";
15 
16interface DateTimeInputProps {
17  value?: Date;
18  onChange?: (date: Date) => void;
19  disabled?: boolean;
20  name?: string;
21  className?: string;
22}
23 
24function DateTimeInput({
25  value,
26  onChange,
27  disabled = false,
28  name,
29  className,
30}: DateTimeInputProps) {
31  const [open, setOpen] = React.useState(false);
32  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
33    value,
34  );
35  const [timeValue, setTimeValue] = React.useState(() => {
36    if (value) {
37      const hours = value.getHours().toString().padStart(2, "0");
38      const minutes = value.getMinutes().toString().padStart(2, "0");
39      return `${hours}:${minutes}`;
40    }
41    return "12:00";
42  });
43 
44  const handleDateSelect = (date: Date | undefined) => {
45    if (date) {
46      const [hours, minutes] = timeValue.split(":").map(Number);
47      const newDateTime = new Date(date);
48      newDateTime.setHours(hours, minutes, 0, 0);
49      setSelectedDate(newDateTime);
50      onChange?.(newDateTime);
51    }
52    setOpen(false);
53  };
54 
55  const handleTimeChange = (time: string) => {
56    setTimeValue(time);
57    if (selectedDate) {
58      const [hours, minutes] = time.split(":").map(Number);
59      const newDateTime = new Date(selectedDate);
60      newDateTime.setHours(hours, minutes, 0, 0);
61      setSelectedDate(newDateTime);
62      onChange?.(newDateTime);
63    }
64  };
65 
66  return (
67    <div className={cn("space-y-2", className)}>
68      <div className="flex gap-2">
69        <Popover open={open} onOpenChange={setOpen}>
70          <PopoverTrigger asChild>
71            <Button
72              id={name}
73              variant="outline"
74              className={cn(
75                "flex-1 justify-start text-left font-normal",
76                !selectedDate && "text-muted-foreground",
77              )}
78              disabled={disabled}
79            >
80              <CalendarIcon className="mr-2 h-4 w-4" />
81              {selectedDate ? format(selectedDate, "PPP") : "Pick a date"}
82            </Button>
83          </PopoverTrigger>
84          <PopoverContent className="w-auto p-0" align="start">
85            <Calendar
86// … truncated