4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T1a82,"use client"; import * as React from "react"; import { format, subDays, startOfMonth, endOfMonth, subMonths, startOfDay, endOfDay, startOfYear, startOfWeek } from "date-fns"; import { cn } from "@/lib/utils"; import type { DateRange } from "react-day-picker"; import { CalendarIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; export default function AdvancedDatePickerWithInput() { const today = new Date(); const twentyEightDaysAgo = startOfDay(subDays(today, 27)); // Initialize with "Last 28 days" as default const [date, setDate] = React.useState({ from: twentyEightDaysAgo, to: endOfDay(today) }); const [open, setOpen] = React.useState(true); const [currentMonth, setCurrentMonth] = React.useState(new Date()); const handleQuickSelect = (from: Date, to: Date) => { setDate({ from, to }); setCurrentMonth(from); }; const handleToday = () => { handleQuickSelect(startOfDay(today), endOfDay(today)); }; const handleYesterday = () => { const yesterday = subDays(new Date(), 1); handleQuickSelect(startOfDay(yesterday), endOfDay(yesterday)); }; const handleThisWeek = () => { const today = new Date(); // Get the start of the current week (Sunday by default) const startOfCurrentWeek = startOfWeek(today); handleQuickSelect(startOfDay(startOfCurrentWeek), endOfDay(today)); }; const handleLast7Days = () => { const today = new Date(); const sevenDaysAgo = subDays(today, 6); // 6 days ago + today = 7 days handleQuickSelect(startOfDay(sevenDaysAgo), endOfDay(today)); }; const handleLast28Days = () => { const today = new Date(); const twentyEightDaysAgo = subDays(today, 27); // 27 days ago + today = 28 days handleQuickSelect(startOfDay(twentyEightDaysAgo), endOfDay(today)); }; const handleThisMonth = () => { const today = new Date(); handleQuickSelect(startOfMonth(today), endOfDay(today)); }; const handleLastMonth = () => { const today = new Date(); const lastMonth = subMonths(today, 1); handleQuickSelect(startOfMonth(lastMonth), endOfMonth(lastMonth)); }; const handleThisYear = () => { const today = new Date(); // Get January 1st of the current year const startOfCurrentYear = startOfYear(today); handleQuickSelect(startOfDay(startOfCurrentYear), endOfDay(today)); }; return (

{ setDate(newDate); if (newDate?.from) { setCurrentMonth(newDate.from); } if (newDate?.from && newDate?.to) { setOpen(false); } }} onMonthChange={setCurrentMonth} />

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://shadcnuikit.com/r/date-picker-example4.json","proxyUrl":"https://shadcnregistry.com/r/shadcnuikit/date-picker-example4","itemId":"@shadcnuikit/date-picker-example4"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"contents/examples/date-picker/use-cases/4/index.tsx","content":"$51","type":"registry:component","target":"components/date-picker-example4.tsx"}]}]]}],"$L52"]}]

Use Cases

Installation

Files

components

Styles