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.
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)
/**
* A date range field in a card: a label and a button showing the chosen
* range, which opens a two-month calendar. It starts with January 20 to
* February 9 of the current year selected.
*
* The label and placeholder live in `COPY`; the start date is `START`.
*/
export default function DatePicker({
defaultOpen = false,
}: {
/** Opens the calendar on first render. Defaults to `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>
)
}
pnpm dlx shadcn add @01orbital/date-pickernpx shadcn add @01orbital/date-pickeryarn shadcn add @01orbital/date-pickerbunx --bun shadcn add @01orbital/date-pickerFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/app/date-picker/index.tsx, as source you own and edit.
"use client"
import { useEffect } from "react"
import DatePicker from "@/components/blocks/app/date-picker"
// Open on load so the card shows the calendar; the trigger card centres and
// the calendar hangs below it. The popover focuses its first button when it
// opens, which the card shot should not carry, so the demo drops that focus
// once the popover has settled.
export default function DatePickerDemo() {
useEffect(() => {
const id = window.setTimeout(() => {
if (document.activeElement instanceof HTMLElement)
document.activeElement.blur()
}, 300)
return () => window.clearTimeout(id)
}, [])
return <DatePicker defaultOpen />
}Prop
Type
npm: date-fns. The CLI installs them for you.
Registry pieces it installs with it:
carddate-range-pickerData Table
A members data table with search, sortable name, role and joined columns, row and page checkboxes, status badges, per-row action menus and pagination at six rows a page. Columns hide on narrow screens.
Demographics
A reader demographics card that shows age bands as progress bars with their shares, plus a dialog with the full breakdown in a table. Bands and the reader total are plain data; numbers format by locale.