Integrations

Packages

• Plain DOM
• Web Components
• React
• Vue
• Solid
• Svelte

Plain DOM

Install @litopis/dom and create a date picker on an existing element.

npm install @litopis/dom

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

const picker = createDatePicker(root, {
  mode: "popover",
  label: "Start date",
});

picker.getISOValue();

To use your own field, place an input directly inside the root with slot="input" before calling createDatePicker().

<div id="picker">
  <input slot="input" class="my-input" placeholder="Choose a date" />
</div>

See the API reference for options and controller methods.

CSS

Packages do not load CSS. Import one Litopis stylesheet in your application entry.

import "@litopis/dom/styles/base.css";