universal-datetime-picker

npm install universal-datetime-picker

CDN date time picker

Add the jsDelivr stylesheet and IIFE script to any static HTML page. No npm or bundler required. Custom elements register automatically; attach change listeners for values. Pin a package version in production URLs for reproducible deploys.

jsDelivr IIFE + stylesheet, no bundler.

Try the live demo
npm install universal-datetime-picker

Live demo

Inline date · Date object

null

Popover datetime input

null

Date range

null → null

Plain HTML

<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>

Notes

  • The IIFE bundle registers custom elements and can inject the default stylesheet link.
  • Pin a version in production, e.g. …/universal-datetime-picker@2.0.0/dist/style.css and …/dist/cdn/universal-datetime-picker.iife.js

Documentation

Guides for this stack and the shared API.