calendar-17

1"use client"
2 
3import * as React from "react"
4 
5import { Calendar } from "@/registry/default/ui/calendar"
6import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
7import { Input } from "@/registry/default/ui/input"
8import { Label } from "@/registry/default/ui/label"
9 
10export default function Calendar17() {
11  const [date, setDate] = React.useState<Date | undefined>(
12    new Date(2025, 5, 12)
13  )
14 
15  return (
16    <Card className="w-fit py-4">
17      <CardContent className="px-4">
18        <Calendar
19          mode="single"
20          selected={date}
21          onSelect={setDate}
22          className="bg-transparent p-0 [--cell-size:2.8rem]"
23        />
24      </CardContent>
25      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
26        <div className="flex-1">
27          <Label htmlFor="time-from" className="sr-only">
28            Start Time
29          </Label>
30          <Input
31            id="time-from"
32            type="time"
33            step="1"
34            defaultValue="10:30:00"
35            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
36          />
37        </div>
38        <span>-</span>
39        <div className="flex-1">
40          <Label htmlFor="time-to" className="sr-only">
41            End Time
42          </Label>
43          <Input
44            id="time-to"
45            type="time"
46            step="1"
47            defaultValue="12:30:00"
48            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
49          />
50        </div>
51      </CardFooter>
52    </Card>
53  )
54}