Date picker · 0nlyType

Example

The call is on .

Deliver the brief by

Pick the day Halden's brief is due.

Present the identity onHold the review onTake the week off from

Rest

Hover

Focus

Chosen

Disabled

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base, calendar, field, and popover along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/date-picker.json

Usage

date-picker-example.tsx

"use client"import * as React from "react"import { DatePicker } from "@/components/ui/date-picker"import { Field } from "@/components/ui/field"export default function Example() {const [due, setDue] = React.useState<Date>()return (<div className="grid w-full max-w-md gap-10"><p className="ot-mp">The call is on <DatePicker aria-label="Day of the call" disablePast />.</p><Field label="Deliver the brief by" hint={due ? "We'll send the reminder the day before." : "Pick the day Halden's brief is due."}><DatePicker placeholder="choose a day" disablePast value={due} onValueChange={setDue} /></Field><DatePicker label="Present the identity on" placeholder="choose a day" variant="ruler" /><DatePicker label="Hold the review on" placeholder="choose a day" variant="ghost" /><DatePicker label="Take the week off from" placeholder="choose a day" variant="parenthesis" disablePast /></div>)}

Contract

Underneath: Radix Popover holding the calendar.
Anatomy: <button class="ot-date" popovertarget="id" aria-haspopup="dialog"> inside a sentence, opening an ot-pop that holds an ot-month. data-set marks a chosen date.
A date inside a sentence, like the select. The month hangs from it on a leader line; choosing a day writes it into the sentence in italic and closes the popover.
variant passes to the month (dots, ruler, ghost or parenthesis); each holds at popover size (the ghost is sized to the month's width, the parenthesis line wraps to it), where --big steps the numeral down to --ot-ff. Opening focuses the day that holds the month's tab stop (the chosen day, else today).
Keyboard: the month's own (arrows move by day or week, Enter chooses); Escape closes.

Props

Props of Date picker
Prop	Type	Default	What it does
`value / defaultValue / onValueChange`	`Date, (date) => void`		The chosen day, controlled or not. It is written as words, such as Thursday, 1 October.
`label`	`string`		The words before the date, such as Deliver the brief by. They label the button, and clicking them opens the month. Inside a Field, use the Field's label.
`placeholder`	`string`	`"choose a day"`	What the sentence says before a day is chosen.
`disablePast`	`boolean`	`false`	Days before today can't be chosen.
`variant`	`"dots" \| "ruler" \| "ghost" \| "parenthesis"`	`"dots"`	How the month draws time; see Calendar. Each holds at popover size: the ghost scales with the month, and the parenthesis line wraps to it.
`locale`	`string`	`"en-GB"`	Month and weekday names, for the line and the month.
`Keyboard`	`note`		Enter or Space opens the month; its arrows move by day and week and Enter chooses. Escape closes it and puts focus back on the date.
`rootClassName`	`string`		Classes for the outer sentence and label. className goes to the button that opens the month.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Date picker, popover	Weingart callouts	Hung from the opener on a leader line

How it moves

How it moves
Component	Articulation	What moves
Date picker	Spiccato	The month hangs from the sentence; the date writes in