Date Input

1"use client";
2
3import { CalendarIcon } from "lucide-react";
4import * as React from "react";
5import { Calendar } from "@/components/ui/calendar";
6import { Input } from "@/components/ui/input";
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from "@/components/ui/popover";
12import { Button } from "@/registry/new-york/components/button";
13
14function formatDate(date: Date | undefined) {
15  if (!date) {
16    return "";
17  }
18
19  return date.toLocaleDateString("en-US", {
20    day: "2-digit",
21    month: "long",
22    year: "numeric",
23  });
24}
25
26function isValidDate(date: Date | undefined) {
27  if (!date) {
28    return false;
29  }
30  return !Number.isNaN(date.getTime());
31}
32function DateInput({
33  value,
34  onChange,
35}: {
36  value?: Date;
37  onChange?(date: Date): void;
38}) {
39  const [open, setOpen] = React.useState(false);
40  const [date, setDate] = React.useState<Date | undefined>(value);
41  const [month, setMonth] = React.useState<Date | undefined>(date);
42  const [val, setVal] = React.useState(formatDate(date));
43
44  React.useEffect(() => {
45    if (date) {
46      onChange?.(date);
47    }
48  }, [date, onChange]);
49
50  return (
51    <div className="relative flex gap-2">
52      <Input
53        id="date"
54        value={val}
55        placeholder="June 01, 2025"
56        className="bg-background pr-10"
57        onChange={(e) => {
58          const date = new Date(e.target.value);
59          setVal(e.target.value);
60          if (isValidDate(date)) {
61            setDate(date);
62            setMonth(date);
63          }
64        }}
65        onKeyDown={(e) => {
66          if (e.key === "ArrowDown") {
67            e.preventDefault();
68            setOpen(true);
69          }
70        }}
71      />
72      <Popover open={open} onOpenChange={setOpen}>
73        <PopoverTrigger asChild>
74          <Button
75            id="date-picker"
76            variant="ghost"
77            className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
78          >
79            <CalendarIcon className="size-3.5" />
80            <span className="sr-only">Select date</span>
81          </Button>
82        </PopoverTrigger>
83        <PopoverContent
84          className="w-auto overflow-hidden p-0"
85          align="end"
86          alignOffset={-8}
87          sideOffset={10}
88        >
89          <Calendar
90            mode="single"
91            selected={date}
92            captionLayout="dropdown"
93            month={month}
94            onMonthChange={setMonth}
95// … truncated