LLabanaat

DatePicker

Built on the native <input type="date"> rather than a custom calendar grid — a deliberate trade-off. The native control gets correct keyboard input, locale-aware formatting, and mobile date wheels for free, at the cost of custom visual styling. A fully custom DateRangePicker is planned as a follow-up — see the roadmap.

<DatePicker label="Start date" className="ui-w-56" />

Editable — change the code above and the preview updates live.

Installation

import { DatePicker } from "@labanaat/ui/date-picker";

Props

PropTypeDefaultDescription
labelstringField label
descriptionstringHelper text
errorstringError message; sets aria-invalid
min / maxstringISO 8601 date bounds, e.g. "2025-01-01"