Entry points

The package name is universal-datetime-picker. Import the subpath that matches your runtime. There are no ./solid or ./preact exports. Solid and Preact use Web Components.

Export table

Import / URL	Provides	When to use
`universal-datetime-picker`	`DateTime`, `DateTimeInput`, `DateTimeRange`, shared types	React (and Next.js client components)
`universal-datetime-picker/vanilla`	`createDateTimePicker`, `createDateTimeRangePicker`	Plain JS/TS without custom elements
`universal-datetime-picker/wc`	`defineCustomElements`, element classes, `ensureStylesheet`	Custom elements in any DOM host
`universal-datetime-picker/vue`	Vue registration helpers around the WC build	Vue SFCs and Nuxt client plugins
`universal-datetime-picker/svelte`	Svelte registration helpers around the WC build	Svelte apps
`universal-datetime-picker/angular`	`registerDateTimePickerElements()` and related helpers	Angular apps
`universal-datetime-picker/core`	Headless controllers and date/calendar logic	Custom UI on top of the same state machine
`universal-datetime-picker/style.css`	Shared stylesheet	Required for every UI entry point
CDN CSS `https://cdn.jsdelivr.net/npm/universal-datetime-picker@{version}/dist/style.css`	Same stylesheet as the npm CSS export	Script-tag pages; pin `{version}`
CDN JS `https://cdn.jsdelivr.net/npm/universal-datetime-picker@{version}/dist/cdn/universal-datetime-picker.iife.js`	IIFE global (includes `defineCustomElements`)	CDN / no bundler

React

import DateTime, {
  DateTimeInput,
  DateTimeRange,
} from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

Peer dependencies react and react-dom ≥ 18 apply only when you use this entry.

Vanilla

import {
  createDateTimePicker,
  createDateTimeRangePicker,
} from "universal-datetime-picker/vanilla";
import "universal-datetime-picker/style.css";

Web Components

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

defineCustomElements();
// <datetime-picker>, <datetime-picker-input>, <datetime-picker-range>

Events: change and openchange (detail carries the value or open boolean). Attributes use kebab-case, for example as-string, default-open.

Vue, Svelte, Angular

Prefer the framework helper entry so custom elements register once. Under the hood they wrap the same WC tags. See Vue, Svelte, and Angular.

Solid and Preact

Use ./wc (or CDN) and mount the custom elements. Do not look for universal-datetime-picker/solid or .../preact. Guides: Solid, Preact.

CDN without a bundler

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

More detail: Web Components & CDN. Live demos: examples. Stuck? Troubleshooting.