FAQ

Short answers for install, entries, return values, and framework support. For symptom-level fixes, see Troubleshooting.

Is universal-datetime-picker a React date picker?

Yes. DateTime, DateTimeInput, and DateTimeRange are native React components on the main package entry. The same calendar core also ships as vanilla JS, Web Components, and thin Vue / Svelte / Angular registration helpers.

Does it work without React?

Yes. Use universal-datetime-picker/vanilla for createDateTimePicker, or universal-datetime-picker/wc (and the CDN IIFE) for custom elements. React peers are optional when you stay on those entries.

What is the support model for Solid and Preact?

Partial compatibility through Web Components only. There is no ./solid or ./preact package export. Register defineCustomElements from universal-datetime-picker/wc and render datetime-picker tags. Preact can also use preact/compat with the React entry if you prefer native React components.

What does onChange return?

With asString omitted or false, date and datetime modes return a Date, and time mode returns a TimeValue object. Set asString to true for formatted strings. Date-only overlays commit on day click; datetime and time overlays commit when you press OK.

What is the difference between inline, popover, and overlay?

Inline embeds the calendar in the page. Popover anchors the panel to an element (DateTimeInput always uses this). Overlay is a centered modal with a backdrop. Non-inline pickers default to open unless you set open or defaultOpen to false.

Does DateTimeRange support popover anchoring?

No. DateTimeRange supports inline and modal open/close state, but it does not accept popover or anchorEl. Use a trigger button with open / onOpenChange if you need a closed-by-default range picker.

How do locales work?

Pass a dayjs locale id such as fr or pt-br to the locale prop, and import that dayjs locale module first (for example import "dayjs/locale/fr"). Locale ids are dayjs module names, not arbitrary BCP-47 tags. UI chrome strings still use the labels prop.

How do I use it from a CDN?

Load dist/style.css and dist/cdn/universal-datetime-picker.iife.js from jsDelivr or unpkg, then use <datetime-picker>, <datetime-picker-input>, or <datetime-picker-range>. Listen for the change CustomEvent; detail holds the selected value. Pin a version in production.

Which package entry should I import?

universal-datetime-picker for React; ./vanilla for createDateTimePicker; ./wc for defineCustomElements; ./vue, ./svelte, or ./angular for registration helpers; ./core for headless controllers; ./style.css for styles.

Is the calendar accessible?

Overlay pickers use dialog semantics, focus trapping, Escape to close, and arrow-key day navigation so keyboard and screen-reader users can select dates and times.

Why does my non-inline picker open as soon as the page loads?

React and vanilla non-inline pickers default to open unless you set open or defaultOpen to false. Web Components treat an absent open attribute as closed. For trigger UIs, control open state explicitly.

Can I use DateTimeRange as a popover next to a button?

No. DateTimeRange supports inline and modal open/close state, but it does not accept popover or anchorEl. Drive open / onOpenChange from your own trigger, or use a single DateTime popover for one-date selection.

Do I need dayjs as a direct dependency?

The package depends on dayjs already. Import locale modules such as dayjs/locale/fr from dayjs when you set the locale prop. Locale ids are dayjs module names, not arbitrary BCP-47 tags.

Where should I import CSS from on a CDN page?

Use dist/style.css on jsDelivr or unpkg. The npm export universal-datetime-picker/style.css is for bundlers. Pin a version in production URLs.

Is there a ./solid or ./preact entry?

No. Solid and Preact use defineCustomElements from universal-datetime-picker/wc. Preact can also use preact/compat with the React entry.

FAQ

Related links