Web Components and CDN

Try the live Web Components demo or the CDN (no bundler) demo for interactive pickers and copy-paste snippets.

Support tier

Full support. Standard custom elements via universal-datetime-picker/wc, or the CDN IIFE that registers the same tags. No React peers required.

Install + deps

npm install universal-datetime-picker

For CDN-only pages, skip npm and load the stylesheet plus IIFE from jsDelivr. Pin a version in production.

Setup

Call defineCustomElements() once, import style.css, then use the tags in HTML or any framework that can render custom elements.

Exact import path

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

defineCustomElements();

Minimal example

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

defineCustomElements();

const el = document.querySelector("datetime-picker");
el?.addEventListener("change", (e) => {
  console.log((e as CustomEvent).detail);
});

<datetime-picker inline mode="date" as-string="false"></datetime-picker>
<datetime-picker-input placeholder="Pick a date"></datetime-picker-input>
<datetime-picker-range inline as-string="false"></datetime-picker-range>

Realistic example

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

defineCustomElements();

const picker = document.querySelector("datetime-picker")!;
const label = document.querySelector("#selected")!;

picker.addEventListener("change", (e) => {
  const detail = (e as CustomEvent).detail;
  label.textContent =
    detail instanceof Date ? detail.toLocaleString() : String(detail ?? "");
});

picker.addEventListener("openchange", (e) => {
  console.log("open:", (e as CustomEvent).detail);
});

<button id="open" type="button">Open</button>
<datetime-picker mode="datetime" as-string="false"></datetime-picker>
<p id="selected"></p>
<script>
  const picker = document.querySelector("datetime-picker");
  document.getElementById("open").addEventListener("click", () => {
    picker.setAttribute("open", "");
  });
</script>

CDN

Unpinned URLs resolve to latest. Prefer a pinned path in production, for example @2.1.3.

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/universal-datetime-picker/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/universal-datetime-picker"></script>

<datetime-picker inline mode="date" as-string="false"></datetime-picker>
<script>
  document
    .querySelector("datetime-picker")
    .addEventListener("change", (e) => console.log(e.detail));
</script>

Pinned equivalent used by this site:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/universal-datetime-picker@2.1.3/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/universal-datetime-picker@2.1.3/dist/cdn/universal-datetime-picker.iife.js"></script>

You can also load /dist/cdn/universal-datetime-picker.iife.js explicitly. The package root CDN URL points at the same IIFE.

Configuration notes

Tags: <datetime-picker>, <datetime-picker-input>, <datetime-picker-range>.
Attributes use kebab-case: as-string, show-seconds, use12hours, mode, layout, inline, open, popover, locale, format, theme, value.
Boolean attributes follow HTML conventions. Prefer as-string="false" when you want Date / TimeValue objects in detail.
For non-inline overlays, an absent open attribute means closed on these elements. That differs from React's defaultOpen default.
Vue, Svelte, and Angular helpers re-export the same registration. Solid and Preact use this ./wc path directly.

Events

change: bubbling, composed CustomEvent. detail is the selected value.
openchange: bubbling, composed CustomEvent. detail is the open boolean.

Customization links

Pitfalls

Forgetting defineCustomElements() leaves unknown HTML tags with no behavior.
CDN pages that omit dist/style.css look broken even when the IIFE loads.
Mixing camelCase attribute names in HTML often does nothing. Use kebab-case.
Old calendar-time* tag names from react-calendar-time are gone. See Migration.

Troubleshooting

Unstyled elements, wrong entry, or SSR custom-element errors are covered in Troubleshooting.