Litopis date picker

Litopis is Ukrainian for “chronicle”: date fields and calendars for plain DOM, Web Components, React, Vue, Solid and Svelte.

Getting started Integrations

Keyboard interaction

Day, month and year views share focus movement, selection and range behavior.

Native form support

Use one formatted field or two endpoints without inventing a form abstraction.

Headless core

Calendar state and date math stay independent of the DOM and CSS.

Optional CSS

Use the base stylesheet or a theme adapter for your design system.

Bundle size

Gzipped size from a production build.

JavaScript

Core3.9 kB
Headless state, date math and keyboard navigation.
DOM bindings+11.2 kB
Accessible fields, form values and calendar DOM.
Web Components+2.0 kB
Custom-element API over the DOM bindings.
Framework bindings+0.2–1.2 kB
React, Vue, Solid and Svelte bindings.

+ is added size. Frameworks are peer dependencies.

CSS

Foundation2.7 kB
CSS variables and calendar anatomy.
Base styles+0.3 kB
Neutral default styles.
Theme adapters+0.2–0.3 kB
daisyUI, shadcn and Bootstrap.

Import one CSS entry point.

Try the date picker

Choose the kind of period, fields and calendar you need. Form data updates as you select.

Selection Selection Period Panels

Fields Layout Format Field size

Locale and calendar Locale Week starts Calendar Show adjacent days Show season

Values Return as Initial start Initial end

Limits and actions Minimum date Maximum date Today reference Close on select Show clear button Show today button

No period selected

Install and mount

npm install @litopis/dom

import { createDatePicker } from "@litopis/dom";
import "@litopis/dom/styles/base.css";

const root = document.querySelector<HTMLElement>("#travel-date");

if (root) {
  createDatePicker(root, {
    mode: "popover",
    format: "dd.mm.yyyy",
    label: "Travel date",
    locale: "uk-UA",
  });
}

Styles are optional. Date input and keyboard support still work.

Integrations

Styling

Import foundation, base, daisyUI, shadcn or Bootstrap styles from @litopis/dom/styles.

Styling guide →

css

/* Example: use the host shadcn tokens */
@import "@litopis/dom/styles/shadcn.css";

.litopis {
  --litopis-control-size: 44px;
  --litopis-width: 22rem;
}