calendar-28

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