# Use cases

> Calendar and date-range pickers with presets like today, last 7 days, this month. Copy these shadcn/ui patterns for filters and booking flows.

A shadcn/ui block from the [@shadcnuikit](https://shadcnuikit.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnuikit/date-picker-example3).

- Page, with a live preview: https://shadcn.exchange/r/shadcnuikit/date-picker-example3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnuikit/date-picker-example3-light-800a4f1688abb0cc.png
- Registry item: https://shadcnuikit.com/r/date-picker-example3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnuikit.com/r/date-picker-example3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `date-fns`, `react-day-picker`
- Registry items: `button`, `calendar`, `toggle-group`

## Files

### `contents/examples/date-picker/use-cases/3/index.tsx`

```tsx
"use client";

import * as React from "react";
import {
  subDays,
  startOfMonth,
  endOfMonth,
  subMonths,
  startOfDay,
  endOfDay,
  startOfYear,
  startOfWeek
} from "date-fns";
import type { DateRange } from "react-day-picker";

import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function AdvancedDatePicker() {
  const today = new Date();
  const twentyEightDaysAgo = startOfDay(subDays(today, 27));

  // Initialize with "Last 28 days" as default
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: twentyEightDaysAgo,
    to: endOfDay(today)
  });
  const [open, setOpen] = React.useState(false);
  const [currentMonth, setCurrentMonth] = React.useState<Date>(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 (
    <div className="flex border rounded-md p-2">
      <div className="me-2">
        <ToggleGroup type="single" defaultValue="last28Days" className="w-28 flex-col">
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="today"
            onClick={handleToday}
            asChild>
            <Button className="justify-start rounded-md">Today</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="yesterday"
            onClick={handleYesterday}
            asChild>
            <Button className="justify-start rounded-md text-start">Yesterday</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="last7Days"
            onClick={handleLast7Days}
            asChild>
            <Button className="justify-start rounded-md">Last 7 days</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="thisWeek"
            onClick={handleThisWeek}
            asChild>
            <Button className="justify-start rounded-md">This week</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="last28Days"
            onClick={handleLast28Days}
            asChild>
            <Button className="justify-start rounded-md">Last 28 days</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="thisMonth"
            onClick={handleThisMonth}
            asChild>
            <Button className="justify-start rounded-md text-start">This month</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="lastMonth"
            onClick={handleLastMonth}
            asChild>
            <Button className="justify-start rounded-md">Last month</Button>
          </ToggleGroupItem>
          <ToggleGroupItem
            className="text-muted-foreground w-full"
            value="thisYear"
            onClick={handleThisYear}
            asChild>
            <Button className="justify-start rounded-md">This year</Button>
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
      <Calendar
        className="border-s py-0! pe-0!"
        mode="range"
        month={currentMonth}
        selected={date}
        onSelect={(newDate) => {
          setDate(newDate);
          if (newDate?.from) {
            setCurrentMonth(newDate.from);
          }
          if (newDate?.from && newDate?.to) {
            setOpen(false);
          }
        }}
        onMonthChange={setCurrentMonth}
      />
    </div>
  );
}
```