{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker-example3",
  "title": "Use cases",
  "description": "Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.",
  "files": [
    {
      "path": "contents/examples/date-picker/use-cases/3/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  subDays,\n  startOfMonth,\n  endOfMonth,\n  subMonths,\n  startOfDay,\n  endOfDay,\n  startOfYear,\n  startOfWeek\n} from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nexport default function AdvancedDatePicker() {\n  const today = new Date();\n  const twentyEightDaysAgo = startOfDay(subDays(today, 27));\n\n  // Initialize with \"Last 28 days\" as default\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: twentyEightDaysAgo,\n    to: endOfDay(today)\n  });\n  const [open, setOpen] = React.useState(false);\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(new Date());\n\n  const handleQuickSelect = (from: Date, to: Date) => {\n    setDate({ from, to });\n    setCurrentMonth(from);\n  };\n\n  const handleToday = () => {\n    handleQuickSelect(startOfDay(today), endOfDay(today));\n  };\n\n  const handleYesterday = () => {\n    const yesterday = subDays(new Date(), 1);\n    handleQuickSelect(startOfDay(yesterday), endOfDay(yesterday));\n  };\n\n  const handleThisWeek = () => {\n    const today = new Date();\n    // Get the start of the current week (Sunday by default)\n    const startOfCurrentWeek = startOfWeek(today);\n    handleQuickSelect(startOfDay(startOfCurrentWeek), endOfDay(today));\n  };\n\n  const handleLast7Days = () => {\n    const today = new Date();\n    const sevenDaysAgo = subDays(today, 6); // 6 days ago + today = 7 days\n    handleQuickSelect(startOfDay(sevenDaysAgo), endOfDay(today));\n  };\n\n  const handleLast28Days = () => {\n    const today = new Date();\n    const twentyEightDaysAgo = subDays(today, 27); // 27 days ago + today = 28 days\n    handleQuickSelect(startOfDay(twentyEightDaysAgo), endOfDay(today));\n  };\n\n  const handleThisMonth = () => {\n    const today = new Date();\n    handleQuickSelect(startOfMonth(today), endOfDay(today));\n  };\n\n  const handleLastMonth = () => {\n    const today = new Date();\n    const lastMonth = subMonths(today, 1);\n    handleQuickSelect(startOfMonth(lastMonth), endOfMonth(lastMonth));\n  };\n\n  const handleThisYear = () => {\n    const today = new Date();\n    // Get January 1st of the current year\n    const startOfCurrentYear = startOfYear(today);\n    handleQuickSelect(startOfDay(startOfCurrentYear), endOfDay(today));\n  };\n\n  return (\n    <div className=\"flex border rounded-md p-2\">\n      <div className=\"me-2\">\n        <ToggleGroup type=\"single\" defaultValue=\"last28Days\" className=\"w-28 flex-col\">\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"today\"\n            onClick={handleToday}\n            asChild>\n            <Button className=\"justify-start rounded-md\">Today</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"yesterday\"\n            onClick={handleYesterday}\n            asChild>\n            <Button className=\"justify-start rounded-md text-start\">Yesterday</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"last7Days\"\n            onClick={handleLast7Days}\n            asChild>\n            <Button className=\"justify-start rounded-md\">Last 7 days</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"thisWeek\"\n            onClick={handleThisWeek}\n            asChild>\n            <Button className=\"justify-start rounded-md\">This week</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"last28Days\"\n            onClick={handleLast28Days}\n            asChild>\n            <Button className=\"justify-start rounded-md\">Last 28 days</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"thisMonth\"\n            onClick={handleThisMonth}\n            asChild>\n            <Button className=\"justify-start rounded-md text-start\">This month</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"lastMonth\"\n            onClick={handleLastMonth}\n            asChild>\n            <Button className=\"justify-start rounded-md\">Last month</Button>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            className=\"text-muted-foreground w-full\"\n            value=\"thisYear\"\n            onClick={handleThisYear}\n            asChild>\n            <Button className=\"justify-start rounded-md\">This year</Button>\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n      <Calendar\n        className=\"border-s py-0! pe-0!\"\n        mode=\"range\"\n        month={currentMonth}\n        selected={date}\n        onSelect={(newDate) => {\n          setDate(newDate);\n          if (newDate?.from) {\n            setCurrentMonth(newDate.from);\n          }\n          if (newDate?.from && newDate?.to) {\n            setOpen(false);\n          }\n        }}\n        onMonthChange={setCurrentMonth}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/date-picker-example3.tsx"
    }
  ],
  "type": "registry:block"
}