CalendarWithTime() — ui Function Reference

Architecture documentation for the CalendarWithTime() function in calendar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CalendarWithTime() — ui Function Reference

Dependency Diagram

graph TD
  be4bf0d8_869c_5791_8da6_73b29bb2c15b["CalendarWithTime()"]
  5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab["calendar-demo.tsx"]
  be4bf0d8_869c_5791_8da6_73b29bb2c15b -->|defined in| 5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab
  style be4bf0d8_869c_5791_8da6_73b29bb2c15b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/calendar-demo.tsx lines 132–180

function CalendarWithTime() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
  )

  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">With Time Input</div>
      <Card className="w-fit py-4">
        <CardContent className="px-4">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            className="p-0"
          />
        </CardContent>
        <CardFooter className="flex flex-col gap-3 border-t px-4 pt-4">
          <div className="flex w-full flex-col gap-2">
            <Label htmlFor="time-from">Start Time</Label>
            <div className="relative flex w-full items-center gap-2">
              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
              <Input
                id="time-from"
                type="time"
                step="1"
                defaultValue="10:30:00"
                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
              />
            </div>
          </div>
          <div className="flex w-full flex-col gap-2">
            <Label htmlFor="time-to">End Time</Label>
            <div className="relative flex w-full items-center gap-2">
              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
              <Input
                id="time-to"
                type="time"
                step="1"
                defaultValue="12:30:00"
                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
              />
            </div>
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}