Solid

Try the live Solid demo for interactive picker and copy-paste snippets.

Support tier

Partial compatibility through Web Components only. There is no ./solid package export and no native Solid components. Import defineCustomElements from universal-datetime-picker/wc and render datetime-picker* tags on the client.

Install + deps

npm install universal-datetime-picker

SolidJS on the client. React peers are not required for this path.

Setup

Register custom elements once in your client entry before render. Keep registration and picker markup out of SSR paths. Bind Solid signals from the native change event.

Exact import path

import { defineCustomElements } from "universal-datetime-picker/wc";
import "universal-datetime-picker/style.css";

defineCustomElements();

Do not import from universal-datetime-picker expecting Solid components. That entry is React-only.

Minimal example

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

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>
    </>
  );
}

Realistic example

import { createSignal, onMount, Show } from "solid-js";
import { defineCustomElements } from "universal-datetime-picker/wc";
import "universal-datetime-picker/style.css";

export function Booking() {
  const [date, setDate] = createSignal<Date | null>(null);
  const [ready, setReady] = createSignal(false);

  onMount(() => {
    defineCustomElements();
    setReady(true);
  });

  return (
    <Show when={ready()}>
      <>
        <datetime-picker-input
          placeholder="Pick date & time"
          as-string="false"
          onchange={(e: Event) => {
            const next = (e as CustomEvent).detail;
            setDate(next instanceof Date ? next : null);
          }}
        />
        <p>{date()?.toLocaleString() ?? "No date"}</p>
      </>
    </Show>
  );
}

Configuration notes

This path is the same custom elements used by Vue, Svelte, and Angular helpers, registered via ./wc directly.
JSX may need a custom-elements / TypeScript JSX intrinsic declaration for datetime-picker tags depending on your tsconfig.
Attributes are kebab-case strings on the element.
Prefer client-only islands in SolidStart. Custom element classes are browser APIs.

Events

onchange: (e as CustomEvent).detail is the value
onopenchange: open boolean in detail

Customization links

Pitfalls

Importing DateTime from the main package pulls React components and will not give you Solid primitives.
Looking for universal-datetime-picker/solid fails. That export does not exist.
SSR without a client boundary throws when HTMLElement subclasses load.

Troubleshooting

Native React import mistakes and SSR failures are listed in Troubleshooting.