npm install universal-datetime-picker

Preact date time picker

Preact apps register Web Components from ./wc and render datetime-picker tags with onchange props. For a React-like API instead, you can use preact/compat with the main React component entry. This page focuses on the custom-element path that matches other non-React stacks.

Custom elements with Preact props and onChange.

Try the live demo

npm install universal-datetime-picker

Live demo

Preact component

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

// Call once in main.tsx before render:
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>
    </>
  );
}

Notes

Register custom elements once in main.tsx; Preact renders the tags client-side.
For a React-like API instead, use preact/compat with the main React component entry.

Documentation

Guides for this stack and the shared API.