Date picker
Updated
DatePicker is a select-style field that opens a Calendar in the dithered popup, for one date or a range. It shows the date in the reader's locale and submits "YYYY-MM-DD". Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Pick a launch date
import "@/components/dithercharts/controls.css"
import { DatePicker } from "@/components/dithercharts/date-picker"
<DatePicker label="Due" name="due" min="2026-10-01" onValueChange={setDue} />
<DatePicker
label="Period"
mode="range"
name="period" // submits period-from and period-to
onValueChange={({ from, to }) => setPeriod({ from, to })}
/>Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add date-picker
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field, and its accessible name. |
| placeholder | Type string | Default "Pick a date" | Shown while nothing is chosen. |
| name | Type string | Default – | The form field name: the date's hidden input, or ${name}-from and ${name}-to for a range. |
| disabled | Type boolean | Default false | |
| collisionPadding | Type { top?: number; bottom?: number } | Default 8 each | Space in px the popup keeps clear at the window's top and bottom, e.g. a sticky header's height. It opens on the side with more room. |
| className | Type string | Default – | |
| mode | Type "single" | "range" | Default – | "single" (the default) picks one date; "range" picks a start and an end, the value becoming a DateRange. |
| value | Type string | DateRange | Default – | The chosen date as "YYYY-MM-DD" (a DateRange in range mode), for a controlled picker; pair it with onValueChange. |
| defaultValue | Type string | DateRange | Default – | The date (or range) chosen at first, for an uncontrolled picker. |
| onValueChange | Type ((value: string) => void) | ((value: DateRange) => void) | Default – | Called with the chosen date, or in range mode with the range once both ends are picked. |
| min | Type string | Default – | The earliest date that can be chosen, as "YYYY-MM-DD". |
| max | Type string | Default – | The latest date that can be chosen, as "YYYY-MM-DD". |
| isDateDisabled | Type (date: string) => boolean | Default – | Rules out other dates, e.g. weekends. |
| weekStartsOn | Type 0 | 1 | 2 | 3 | 4 | 5 | 6 | Default 0 | The calendar's first column: 0 is Sunday, 1 Monday, and so on. |
| locale | Type string | Default the browser's | The BCP 47 locale for the field's date and the calendar's names. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |