Date input

Date fields × Actual CSS

Three ways to collect a date: the native picker, a data-mask text field, and @lekoala/date-picker loaded from CDN and themed with Actual CSS tokens. Switch themes and watch the external picker follow.

date-picker docs

Native — the baseline

<input type="date"> gives a real calendar with no JavaScript. The submitted value is always an ISO yyyy-mm-dd string, whatever format the platform displays, and the platform owns the picker.

Start date

Masked text — a fixed wire format

data-mask structures a plain text field to a fixed shape and the date validation rule rejects impossible values. Use it when the submitted format must be explicit text rather than a platform date control.

External picker — a widget on Actual tokens

@lekoala/date-picker adds a calendar popup over a plain Actual .input. The skin is a --dp-* token map, focus included, plus the panel shadow; controlClasses makes the header month, year and arrows real .select, .input and .btn. Themes and light/dark mode apply for free; the widget keeps its own behaviour.

Booking date

Which one?

A plain date the platform can collect: native <input type="date">.
A fixed text format that must survive as typed text: data-mask plus the date rule.
A calendar, range, or constraint the native control cannot express: an external picker on the token bridge.