calendar-25

1"use client"
2 
3import * as React from "react"
4import { ChevronDownIcon } 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 
16export default function Calendar25() {
17  const [open, setOpen] = React.useState(false)
18  const [date, setDate] = React.useState<Date | undefined>(undefined)
19 
20  return (
21    <div className="flex flex-col gap-6">
22      <div className="flex flex-col gap-3">
23        <Label htmlFor="date" className="px-1">
24          Date
25        </Label>
26        <Popover open={open} onOpenChange={setOpen}>
27          <PopoverTrigger asChild>
28            <Button
29              variant="outline"
30              id="date"
31              className="w-full justify-between font-normal"
32            >
33              {date ? date.toLocaleDateString() : "Select date"}
34              <ChevronDownIcon />
35            </Button>
36          </PopoverTrigger>
37          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
38            <Calendar
39              mode="single"
40              selected={date}
41              captionLayout="dropdown"
42              onSelect={(date) => {
43                setDate(date)
44                setOpen(false)
45              }}
46            />
47          </PopoverContent>
48        </Popover>
49      </div>
50      <div className="flex gap-4">
51        <div className="flex flex-col gap-3">
52          <Label htmlFor="time-from" className="px-1">
53            From
54          </Label>
55          <Input
56            type="time"
57            id="time-from"
58            step="1"
59            defaultValue="10:30:00"
60            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
61          />
62        </div>
63        <div className="flex flex-col gap-3">
64          <Label htmlFor="time-to" className="px-1">
65            To
66          </Label>
67          <Input
68            type="time"
69            id="time-to"
70            step="1"
71            defaultValue="12:30:00"
72            className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
73          />
74        </div>
75      </div>
76    </div>
77  )
78}