Overview

Getting started

doticca-ui has no build requirement. Include one stylesheet and one script, then instantiate a component against an existing form element.

Add the library

The suite ships pre-bundled in /dist. Choose the format that matches how you load JavaScript. Both ship a matching CSS file that carries the design tokens and all component styles.

1 — Plain <script> (global)

The IIFE build exposes a global UISuite. This is the simplest option and the one this documentation site uses.

<link rel="stylesheet" href="/dist/ui-suite.css" />
<script src="/dist/ui-suite.iife.js"></script>

<input type="text" id="date" />

<script>
  new UISuite.DateTimePicker("#date", { mode: "date" });
</script>

2 — ES modules

Import only what you need. The suite is tree-shakeable, so unused components and core primitives are dropped by your bundler.

import { DateTimePicker, SelectPicker } from "./dist/ui-suite.esm.js";
// or per-component:
// import DateTimePicker from "./dist/datetimepicker.esm.js";

import "./dist/ui-suite.css";

new DateTimePicker("#date", { mode: "datetime" });
new SelectPicker("#country", { options: countries, searchable: true });

Your first DateTimePicker

Point the constructor at any text input. On focus or click it opens a popover on desktop and a bottom sheet on touch devices — no extra configuration.

new UISuite.DateTimePicker("#meeting", {
  mode: "datetime",        // "date" | "time" | "datetime" | "range"
  use24Hour: false,
  minuteStep: 5,
  displayFormat: "DD/MM/YYYY hh:mm A",
  onChange: (value) => console.log(value),
});

Your first SelectPicker

Pass an options array, or point the constructor at a native <select> to enhance it progressively (its <option> and <optgroup> structure is read automatically).

new UISuite.SelectPicker("#country", {
  options: [
    { label: "United States", value: "us" },
    { label: "Greece", value: "gr" },
    { label: "Japan", value: "jp" },
  ],
  searchable: true,
  clearable: true,
  placeholder: "Choose a country",
});

Reading values & cleaning up

Every instance exposes getValue(), setValue(), and destroy(). Calling destroy() restores the original DOM element and removes every listener it attached.

const picker = new UISuite.DateTimePicker("#date", { mode: "date" });

picker.getValue();          // -> Date | null
picker.setValue("2025-01-01");
picker.on("change", (v) => console.log(v));

picker.destroy();           // restores the input, removes listeners