universal-datetime-picker

Documentation

universal-datetime-picker is a TypeScript date, time, datetime, and date-range picker. One npm package, one stylesheet, and entry points for React, vanilla JS, Web Components, Vue, Svelte, Angular, and CDN.

Who this is for

  • React apps that want a native component API with optional peers.
  • Vanilla or multi-framework apps that prefer createDateTimePicker or custom elements.
  • Teams that need date-only, time-only, datetime, or start/end range selection with shared CSS theming and dayjs locales.

What you get

  • Modes: date, time, datetime (with combined or tabs layout).
  • Presentation: inline, centered overlay, or popover anchored to an element.
  • Values as Date / TimeValue by default, or formatted strings when asString is true.
  • CSS-variable theming and dayjs locale ids for month and weekday names.
  • Accessible keyboard navigation, focus trap, Escape, and outside click.

Support tiers

Stack How you use it Docs
React Native components from universal-datetime-picker. Peers react / react-dom ≥ 18 are optional only if you skip this entry. React
Vanilla createDateTimePicker / createDateTimeRangePicker from ./vanilla Vanilla
Web Components / CDN defineCustomElements from ./wc. Tags datetime-picker, datetime-picker-input, datetime-picker-range. Events change, openchange. Web Components & CDN
Vue / Svelte / Angular WC helpers from ./vue, ./svelte, ./angular Vue, Svelte, Angular
Next.js React components in a "use client" module Next.js
Nuxt Vue helpers plus a .client plugin and ClientOnly Nuxt
Solid / Preact Web Components only. There is no ./solid or ./preact export. Solid, Preact

Suggested path

  1. Getting started: install, import CSS, render one picker.
  2. Entry points: pick the import that matches your stack.
  3. Components and Props: choose DateTime, DateTimeInput, or DateTimeRange and wire values.
  4. Overlay and triggers when you need a custom button or closed-by-default popover.
  5. Date range, Theming, Locales as needed.
  6. Framework pages, then Troubleshooting if something fails.