date-picker-with-range.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker-with-range",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "button",
    "calendar",
    "popover"
  ],
  "files": [
    {
      "path": "examples/date-picker-with-range.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerWithRange({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(2022, 0, 20),\n    to: addDays(new Date(2022, 0, 20), 20),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            initialFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}