System

Form integration

Components enhance real form elements instead of replacing them. Values submit through standard HTML forms with no extra wiring, and enhancement is fully reversible. This is handled by the shared InputAdapter.

Input integration (DateTimePicker)

The DateTimePicker keeps your visible <input> as the control. It writes two values:

• a human-readable display string to input.value (what the user sees);
• a machine-readable ISO value to the data-dt-value attribute (what you read in code).

<input type="text" name="due" id="due" />

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

<!-- after a selection -->
<input value="January 5, 2025" data-dt-value="2025-01-05" ... />

Select enhancement (SelectPicker)

SelectPicker handles two source shapes:

• Native <select> — its <option> / <optgroup> structure and selected state are read automatically, then the element is visually hidden and reused as the form field.
• Text <input> — the input is hidden and a sibling hidden field carries the value; the name moves onto it for submission.

<!-- progressive enhancement: works without JS, better with it -->
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gr" selected>Greece</option>
</select>

<script>new UISuite.SelectPicker("#country", { searchable: true });</script>

Hidden inputs & multiple values

For a text-input source, the adapter creates a hidden input and moves the field’s name onto it. In multiple mode it joins selected values into a comma-separated string. For a native <select multiple>, the option selected flags are toggled directly, so the browser serializes it natively.

Value syncing & events

On every change the adapter writes the form value and then dispatches two events on the source element: a native change (for plain forms and most framework bindings) and a dt:change CustomEvent whose detail is the typed value.

const input = document.querySelector("#country");

input.addEventListener("change", () => {
  // native event — input.value holds the raw value(s)
});
input.addEventListener("dt:change", (e) => {
  console.log(e.detail); // typed value: string | string[] | Date | {start,end}
});

Reversibility

Calling destroy() runs adapter.restore(): the original element’s visibility, attributes, and name are put back and any hidden field is removed. Enhancement leaves no trace once torn down — important for SPA route changes and component unmounts.

Live form

Submit to see exactly what a normal FormData serialization posts.

Submit to see the posted value…