Date Picker

A controlled single-date picker — atomx ships it as a block composing Popover, Calendar, and Button so you get a consistent API instead of wiring the primitives together yourself.

Install

npx shadcn@latest add https://atomx.acau.net/r/date-picker.json

This installs the DatePicker block and its three registry dependencies — popover, calendar, and button — in one step.

Why a block?

Upstream shadcn/ui documents Date Picker only as a composition pattern — a Popover wrapping a Calendar behind a Button trigger. That leaves every team to re-implement the same plumbing: open/close state, the formatted trigger label, the placeholder fallback, and the onChange wiring.

atomx ships DatePicker as a first-class block so you get:

• A stable value / onChange API you can drop into any form.
• The Popover + Calendar + Button composition handled for you.
• The popover closing automatically once a date is picked.
• Full access to the source after install — customize it freely.

If you need range selection, multiple months, or preset shortcuts, copy the block and extend it. The primitives (Popover, Calendar, Button) are installed alongside it.

Usage

DatePicker is controlled — you own the selected Date in state and pass it back via value.

import { useState } from "react"
import { DatePicker } from "@/components/date-picker/date-picker"

export function Example() {
  const [date, setDate] = useState<Date | undefined>(undefined)

  return (
    <DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
  )
}

Preview

Props

Dates are formatted with the built-in Date.prototype.toLocaleDateString() — no extra date library is required.