KQ-1130 · PLAIN/DATE

Plain Date

A date field you type in words: it reads today, tomorrow, next fri 3pm, in 2 weeks or oct 23 against a now you pass, lights the words it used, slides the date out of the end of the phrase as a chip on the snap spring, and lights the day in a mini calendar whose light hops on snap and whose page turns on glide when the month changes. A phrase with two readings offers both chips; ArrowDown and ArrowUp choose, Enter or a click sets, Escape puts back the last set phrase. It is a real input with the combobox pattern, so typing, selection, IME, paste and undo stay native.

KQ-1130 · PLAIN/DATE

Restock the Basin sampling kits

Fernworks · Field ops

Due

Two readings · ↑ ↓ to switch · Enter sets

not set · type a day, enter sets it

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/plain-date

Props

label: string; default —; What the date is for. Shown above the field and tied to it by id.
now: Date; default —; The moment phrases are read against. Required. Pass a fixed moment or one taken in an effect, never new Date() during render.
value / defaultValue: Date | null; default null; The committed date. Controlled or uncontrolled; a host that sets a date the field did not report sees it written back as a phrase the field reads ("fri 23 oct 3:00pm").
onValueChange: (value: Date | null, detail: { hasTime: boolean }) => void; default —; Fires from the Enter, chip click or blur that committed it, with whether a time was given. null when the field is cleared and Enter pressed.
defaultText: string; default —; The phrase the field starts with, read but not committed.
placeholder: string; default "tomorrow 9am"; The field's placeholder.
weekStart: "mon" | "sun" | "sat"; default "mon"; The calendar's first column, each day's chime on the scale, and where "this week" ends, which decides whether next <weekday> has two readings.
format: "short" | "long" | "iso" | "relative"; default "short"; How the chip writes the date: Fri 23 Oct, Friday 23 October, 2026-10-23 with a 24-hour time, or In 10 days with the date underneath.
calendar: boolean; default true; Show the mini calendar beside the field.
strict: boolean; default false; Read only the exact grammar and guess nothing: no short forms or prefixes, no bare hours, unknown words stop the parse, and a phrase with two readings has none chosen until you pick.
sound: boolean; default false; A soft chime when the chosen date changes, pitched by weekday and panned by its calendar column, and a click when it is set. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Disables the field and its chips and dims the calendar.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
label	string	—	What the date is for. Shown above the field and tied to it by id.
now	Date	—	The moment phrases are read against. Required. Pass a fixed moment or one taken in an effect, never new Date() during render.
value / defaultValue	Date \| null	null	The committed date. Controlled or uncontrolled; a host that sets a date the field did not report sees it written back as a phrase the field reads ("fri 23 oct 3:00pm").
onValueChange	(value: Date \| null, detail: { hasTime: boolean }) => void	—	Fires from the Enter, chip click or blur that committed it, with whether a time was given. null when the field is cleared and Enter pressed.
defaultText	string	—	The phrase the field starts with, read but not committed.
placeholder	string	"tomorrow 9am"	The field's placeholder.
weekStart	"mon" \| "sun" \| "sat"	"mon"	The calendar's first column, each day's chime on the scale, and where "this week" ends, which decides whether next <weekday> has two readings.
format	"short" \| "long" \| "iso" \| "relative"	"short"	How the chip writes the date: Fri 23 Oct, Friday 23 October, 2026-10-23 with a 24-hour time, or In 10 days with the date underneath.
calendar	boolean	true	Show the mini calendar beside the field.
strict	boolean	false	Read only the exact grammar and guess nothing: no short forms or prefixes, no bare hours, unknown words stop the parse, and a phrase with two readings has none chosen until you pick.
sound	boolean	false	A soft chime when the chosen date changes, pitched by weekday and panned by its calendar column, and a click when it is set. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Disables the field and its chips and dims the calendar.
className	string	—	Merged onto the root's classes.