Date Picker Input

1"use client";
2 
3import { CalendarIcon } from "@phosphor-icons/react";
4import { format } from "date-fns";
5import * as React from "react";
6import type { HoverEffect } from "@/lib/hover-effects";
7import type { Material } from "@/lib/material";
8import { cn } from "@/lib/utils";
9import { Button } from "./button";
10import { Calendar } from "./calendar";
11import type { Input } from "./input";
12import { Popover, PopoverContent, PopoverTrigger } from "./popover";
13 
14export interface DatePickerInputProps extends Omit<React.ComponentProps<typeof Input>, "value" | "onChange"> {
15  value?: Date;
16  onChange?: (date: Date | undefined) => void;
17  placeholder?: string;
18  variant?: "default" | "glass";
19  /** Passed through to the trigger Button and PopoverContent — each resolves its own role. */
20  material?: Material;
21  effect?: HoverEffect;
22}
23 
24const DatePickerInput = React.forwardRef<HTMLInputElement, DatePickerInputProps>(
25  ({ className, value, onChange, placeholder = "Pick a date", variant = "glass", material, effect }, _ref) => {
26    const [open, setOpen] = React.useState(false);
27 
28    return (
29      <Popover open={open} onOpenChange={setOpen}>
30        <PopoverTrigger asChild>
31          <Button
32            variant={variant}
33            material={material}
34            effect={effect}
35            className={cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className)}
36          >
37            <CalendarIcon className="mr-2 h-4 w-4" />
38            {value ? format(value, "PPP") : <span>{placeholder}</span>}
39          </Button>
40        </PopoverTrigger>
41        <PopoverContent className="w-auto p-0" variant={variant} material={material}>
42          <Calendar
43            mode="single"
44            selected={value}
45            onSelect={(date) => {
46              onChange?.(date);
47              setOpen(false);
48            }}
49            autoFocus
50          />
51        </PopoverContent>
52      </Popover>
53    );
54  },
55);
56DatePickerInput.displayName = "DatePickerInput";
57 
58export { DatePickerInput };