calendar-29

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