DatePicker

Molecule

Popover-based date picker with a locale-aware calendar grid (TR / EN), quick month / year jump from the header, min / max / disabledDates support, and full keyboard navigation (Arrow / PageUp/Down / Shift+Page / Home / End / Enter / Esc). Pixel-identical EJS sibling at modules/ui/DatePicker/DatePicker.ejs.

Preview

Appointment date

Select a future date.

Code

const [date, setDate] = useState<Date | null>(null);
<DatePicker id="date" label="Appointment date" hint="Select a future date." value={date} onChange={setDate} />

Preview

Start date

Code

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

Preview

Due date

Please select a date.

Locked date

Code

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

Preview

Randevu tarihi

Lütfen ileri bir tarih seçin.

Code

<DatePicker
  locale="tr"
  value={date}
  onChange={setDate}
  messages={{ today: 'Bugün seç', clear: 'Temizle' }}
/>

DatePicker

Default

With value

Error / Disabled

Locale: Türkçe + custom messages