Preact

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

Support tier

Partial compatibility through Web Components. There is no ./preact export. Register defineCustomElements from universal-datetime-picker/wc. As an alternative, use preact/compat with the React component entry for a native React-like API.

Install + deps

npm install universal-datetime-picker

Web Components path: no React required. Compat path: install preact and alias React to preact/compat, then use the main package entry like a React app.

Setup

For the WC path, call defineCustomElements() once in main.tsx, import the stylesheet, and render datetime-picker* tags with onchange props.

Exact import path

// Web Components path (recommended default for Preact)
import { defineCustomElements } from "universal-datetime-picker/wc";
import "universal-datetime-picker/style.css";

defineCustomElements();

// Alternative: preact/compat + React entry
import DateTime, { DateTimeInput } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

Minimal example

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

defineCustomElements();

export function App() {
  const [date, setDate] = useState<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 ? date.toString() : "null"}</p>
    </>
  );
}

Realistic example

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

defineCustomElements();

export function Booking() {
  const [date, setDate] = useState<Date | null>(null);
  const [open, setOpen] = useState(false);

  return (
    <>
      <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);
        }}
        onopenchange={(e: Event) => {
          setOpen(Boolean((e as CustomEvent).detail));
        }}
      />
      <p>Open: {String(open)}</p>
      <p>{date ? date.toLocaleString() : "No date"}</p>
    </>
  );
}

Configuration notes

Prefer ./wc unless you already standardize on preact/compat and want React props like onChange / asString.
On the WC path, attributes stay kebab-case and events use onchange / onopenchange.
The compat + React path follows the React guide once aliases are in place.
There is no universal-datetime-picker/preact subpath.

Events

WC: onchange and onopenchange CustomEvents with detail
Compat + React: onChange and onOpenChange callbacks

Customization links

Web Components
React for the compat path
Theming
Props

Pitfalls

Assuming a dedicated Preact build exists. Use ./wc or compat.
Mixing WC tags with React prop names like asString={false} on a custom element does not map the same way as React components. Use as-string="false" on the WC path.
Incomplete React aliases break the compat path at runtime.

Troubleshooting

Wrong entry and missing CSS are the common failures. See Troubleshooting.