calendar-26.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-26",
  "type": "registry:block",
  "author": "shadcn (https://ui.shadcn.com)",
  "description": "Date range picker with time",
  "registryDependencies": [
    "calendar",
    "popover",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "blocks/calendar-26.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Calendar26() {\n  const [openFrom, setOpenFrom] = React.useState(false)\n  const [openTo, setOpenTo] = React.useState(false)\n  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(\n    new Date(\"2025-06-01\")\n  )\n  const [dateTo, setDateTo] = React.useState<Date | undefined>(\n    new Date(\"2025-06-03\")\n  )\n\n  return (\n    <div className=\"flex w-full max-w-64 min-w-0 flex-col gap-6\">\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-from\" className=\"px-1\">\n            Check-in\n          </Label>\n          <Popover open={openFrom} onOpenChange={setOpenFrom}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-from\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateFrom\n                  ? dateFrom.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateFrom}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateFrom(date)\n                  setOpenFrom(false)\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-from\" className=\"invisible px-1\">\n            From\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-from\"\n            step=\"1\"\n            defaultValue=\"10:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n      <div className=\"flex gap-4\">\n        <div className=\"flex flex-1 flex-col gap-3\">\n          <Label htmlFor=\"date-to\" className=\"px-1\">\n            Check-out\n          </Label>\n          <Popover open={openTo} onOpenChange={setOpenTo}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"outline\"\n                id=\"date-to\"\n                className=\"w-full justify-between font-normal\"\n              >\n                {dateTo\n                  ? dateTo.toLocaleDateString(\"en-US\", {\n                      day: \"2-digit\",\n                      month: \"short\",\n                      year: \"numeric\",\n                    })\n                  : \"Select date\"}\n                <ChevronDownIcon />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto overflow-hidden p-0\"\n              align=\"start\"\n            >\n              <Calendar\n                mode=\"single\"\n                selected={dateTo}\n                captionLayout=\"dropdown\"\n                onSelect={(date) => {\n                  setDateTo(date)\n                  setOpenTo(false)\n                }}\n                disabled={dateFrom && { before: dateFrom }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Label htmlFor=\"time-to\" className=\"invisible px-1\">\n            To\n          </Label>\n          <Input\n            type=\"time\"\n            id=\"time-to\"\n            step=\"1\"\n            defaultValue=\"12:30:00\"\n            className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "meta": {
    "iframeHeight": "600px",
    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start md:pt-20 justify-center min-w-0 xl:py-24",
    "mobile": "component"
  },
  "categories": [
    "calendar",
    "date"
  ]
}