universal-datetime-picker

npm install universal-datetime-picker

Web Components date time picker

The wc entry defines standard custom elements you can use from any stack or micro-frontend. Register with defineCustomElements(), listen for bubbling change events, and style with the shared stylesheet. Ideal when you want one calendar implementation across multiple frameworks on the same page.

defineCustomElements from universal-datetime-picker/wc.

Try the live demo
npm install universal-datetime-picker

Live demo

Inline date · Date object

null

Popover datetime input

null

Date range

null → null

Register and use

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

HTML

<datetime-picker inline mode="datetime" 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>

Notes

  • Tags: datetime-picker, datetime-picker-input, datetime-picker-range.
  • change and openchange events bubble and are composed.

Documentation

Guides for this stack and the shared API.