npm install universal-datetime-picker

Solid date time picker

SolidJS has no dedicated package subpath. Import defineCustomElements from universal-datetime-picker/wc in your client entry, then render datetime-picker tags with onchange handlers and signals. Keep registration and rendering client-side only; custom element classes cannot run during SSR.

Custom elements with Solid signals and onchange.

Try the live demo

npm install universal-datetime-picker

Live demo

Solid component

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { defineCustomElements } from "universal-datetime-picker/wc";
import "universal-datetime-picker/style.css";

// Call once in index.tsx before render:
defineCustomElements();

export function App() {
  const [date, setDate] = createSignal<Date | null>(null);

  return (
    <>
      <datetime-picker
        inline
        mode="date"
        as-string="false"
        onchange={(e: Event) => {
          const next = (e as CustomEvent).detail;
          setDate(next instanceof Date ? next : null);
        }}
      />
      <p>Selected: {date()?.toString() ?? "null"}</p>
    </>
  );
}

Notes

Import defineCustomElements from ./wc (Solid has no dedicated subpath).
Register in client entry (index.tsx) once, not inside components that re-run.
Use client-side only; custom element classes cannot run during SSR.

Documentation

Guides for this stack and the shared API.