# Date Picker

> A card holding a Date Range Picker: a labelled trigger that opens a two-month range calendar in a popover, preset to a 20-day span. Uses date-fns to build the default range.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/date-picker).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/date-picker
- Screenshot: https://shadcn.exchange/shot/01orbital/date-picker/light.png
- Registry item: https://01orbital.dev/r/date-picker.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/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`
- Registry items: `card`, `@01orbital/date-range-picker`

## Files

### `blocks/app/date-picker/index.tsx`

```tsx
import { addDays } from "date-fns"

import { DateRangePicker } from "@/components/forms/date-range-picker"
import { Card, CardContent } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Pick a date",
  placeholder: "Pick a date",
} as const

const START = new Date(new Date().getFullYear(), 0, 20)

export default function DatePicker({
  defaultOpen = false,
}: {
  defaultOpen?: boolean
}) {
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardContent>
        <DateRangePicker
          label={COPY.label}
          placeholder={COPY.placeholder}
          defaultValue={{ from: START, to: addDays(START, 20) }}
          defaultOpen={defaultOpen}
        />
      </CardContent>
    </Card>
  )
}
```