form · Normal DOM only

DatePicker · TimePicker · DateRangePicker

Native browser pickers themed with --t-*. Work inside Twenty's Web Worker — no Date library shipped.

Three thin wrappers around <input type="date">, <input type="time">, and a pair of DatePickers. Why native rather than a custom calendar widget? Native pickers handle locale-aware formatting, keyboard a11y, and time-zone displays out of the box — and they ship zero JS for date parsing. For more elaborate needs (presets, "last 30 days") layer a custom calendar in a Popover on top.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { DatePicker, TimePicker, DateRangePicker } from '@8maverik8/twenty-design';

Examples

All three side by side

→

tsx
<DatePicker value={d} onChange={setD} />
<TimePicker value={t} onChange={setT} />
<DateRangePicker value={r} onChange={setR} />

Guidelines

✓

Pass min / max where they make sense (subscription end ≥ start).Native pickers honour them; users get bounded results without extra validation.

✓

Set invalid based on server feedback, not regex on keystroke.Browsers parse YYYY-MM-DD already — let server semantics drive validity.

Use DateRangePicker as a generic two-input pattern.It cross-binds min / max — wrong for unrelated dates.