A date field that understands plain words like tomorrow, next fri, Dec 3 or +10d and previews the parsed date as you type, with a calendar that slides between months. The grid supports arrows, Page Up and Down, Home and End.
npx shadcn@latest add https://hyperblur.dev/r/input-date-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-date-picker.tsx.
import { InputDatePicker } from "@/components/hyperblur/input-date-picker"
<InputDatePicker label="Due date" min="2026-11-01" onChange={(d) => console.log(d)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Date" | Label above the field. Pass an empty string to hide it. |
| value | string | null | Controlled date as YYYY-MM-DD. Pair with onChange. | |
| defaultValue | string | null | null | Initial date when uncontrolled. |
| onChange | (value: string | null) => void | Called with the new date as YYYY-MM-DD, or null when cleared. | |
| defaultMonth | string | Month to show first as YYYY-MM when there is no value. | |
| today | string | Override today as YYYY-MM-DD. Defaults to the visitor's local date. | |
| min | string | Earliest selectable date as YYYY-MM-DD. | |
| max | string | Latest selectable date as YYYY-MM-DD. | |
| disableWeekends | boolean | false | Makes Saturdays and Sundays unavailable. |
| weekStartsOn | 0 | 1 | 0 | First column of the grid: 0 for Sunday, 1 for Monday. |
| inline | boolean | false | Shows the calendar in the page instead of a popover, with quick picks. |
| layout | "stack" | "split" | "stack" | With inline, put the calendar under the field or beside it. |
| cellSize | number | 36 | Size of each day cell in pixels. |
| accent | string | "#2f7bff" | Selected day, today marker and focus color. |
| placeholder | string | "Type a date, like next friday" | Placeholder of the text field. |