Component playground

Date and time controls that stay out of your way.

Import one JavaScript file, use one custom element, and theme every exposed part from your own CSS.

Selected date—
Selected time—
npm i cali-date-picker

Date

One value, two interfaces

Pick visually or type directly. Both controls stay synchronized.

Calendar

<cali-calendar>
Interactive

Date form

<cali-dateform>

Editable year, month, and day fields.

Time

Precise or quick

Scroll through time fragments or edit the value as compact fields.

Clocks

<cali-clocks>

Time form

<cali-timeform>

Hours, minutes, and seconds in one compact row.

Ranges

Start and end, without extra plumbing

Select two values; hover previews the interval before committing it.

Calendar range

<cali-ranger-calendar>

Time range

<cali-ranger-clocks>

Native forms

See what the browser submits

Every component participates in the surrounding form without a framework. 

Select values, then inspect the form.