DatePicker

Molecule

Native date input ile label + hint + error anatomy. Date | null değer modeli, min/max kısıtlaması, disabled tooltip desteği.

Default

Preview

Select a future date.

Code
<DatePicker id="date" label="Appointment date" hint="Select a future date." value={date} onChange={setDate} />

With value

Preview
Code
<DatePicker id="start" label="Start date" value={new Date('2026-06-15')} onChange={setDate} />

Error / Disabled

Preview
Code
<DatePicker id="due" label="Due date" error="Please select a date." required />
<DatePicker id="locked" label="Locked date" value={date} disabled />
Sourcemodules/ui/DatePicker.tsx