# Date Picker

> A calendar, popover and button composed into an installable single-date picker.

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

- Page, with a live preview: https://shadcn.exchange/r/afterglow/date-picker
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/afterglow/date-picker-light-9285a6a6224d071f.png
- Registry item: https://afterglow.thebuilder.dk/r/date-picker.json
- Categories: forms
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://afterglow.thebuilder.dk/r/date-picker.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`, `lucide-react`
- Registry items: `@afterglow/button`, `@afterglow/calendar`, `@afterglow/popover`

## Files

### `registry/terminal/blocks/date-picker.tsx`

```tsx
"use client";

import { format } from "date-fns";
import { CalendarDaysIcon } from "lucide-react";
import { useCallback, useState } from "react";

import { Button } from "@/registry/terminal/ui/button";
import { Calendar } from "@/registry/terminal/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/terminal/ui/popover";

const START_MONTH = new Date(1900, 0);
const END_MONTH = new Date(2100, 11);

function DatePicker() {
  const [date, setDate] = useState<Date>();
  const [open, setOpen] = useState(false);

  const selectDate = useCallback((nextDate: Date | undefined) => {
    setDate(nextDate);
    setOpen(false);
  }, []);

  return (
    <Popover onOpenChange={setOpen} open={open}>
      <PopoverTrigger
        render={
          <Button
            className="w-64 justify-start data-[empty=true]:text-muted-foreground"
            data-empty={!date}
            variant="outline"
          />
        }
      >
        <CalendarDaysIcon />
        {date ? format(date, "PPP") : "Pick a date"}
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-0">
        <Calendar
          autoFocus
          captionLayout="dropdown"
          endMonth={END_MONTH}
          mode="single"
          onSelect={selectDate}
          selected={date}
          startMonth={START_MONTH}
        />
      </PopoverContent>
    </Popover>
  );
}

export { DatePicker };
```