Troubleshooting

Each item lists the symptom, likely cause, and fix. For API details, see Props and the framework guides under Integrate.

Missing CSS

Symptom. The calendar mounts but looks unstyled, stacked wrong, or missing the popover chrome.

Cause. universal-datetime-picker/style.css never entered the bundle, or a CDN page omitted dist/style.css.

Fix. Import the stylesheet once from the package, or link https://cdn.jsdelivr.net/npm/universal-datetime-picker/dist/style.css and pin a version in production.

Wrong entry

Symptom. Build errors for missing exports, unexpected React peer warnings, or defineCustomElements is undefined.

Cause. Import path does not match the stack. Example: importing React components in a Vue app, or expecting ./solid / ./preact.

Fix. Use universal-datetime-picker for React, ./vanilla for imperative mounts, ./wc for raw custom elements, ./vue / ./svelte / ./angular for those helpers. See Entry points.

Vue custom element warnings

Symptom. Vue warns that datetime-picker failed to resolve as a component.

Cause. The compiler treats the tag as a Vue component because isCustomElement is not set.

Fix. Set app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("datetime-picker") in Vue, or the equivalent vue.compilerOptions in Nuxt. Still call defineCustomElements() once.

SSR errors

Symptom. Server render throws on HTMLElement, custom elements, or hydration mismatches.

Cause. Custom element classes or interactive React pickers loaded in a server-only module.

Fix. Next.js: mark the module with "use client". Nuxt: register in a *.client.ts plugin and wrap tags in ClientOnly. SolidStart and similar: keep ./wc registration on the client.

Popover without an anchor

Symptom. Popover opens off-screen, at the wrong place, or not next to the trigger.

Cause. popover is true but anchorEl is null, detached, or never updated after the trigger mounts.

Fix. Pass a live element ref or node as anchorEl. On vanilla, call update({ open: true, anchorEl: trigger }) from the click handler. Or drop popover and use the centered overlay.

Missing dayjs locale

Symptom. Month and weekday labels stay English after setting locale="fr" or similar.

Cause. The dayjs locale module was never imported. Passing a BCP-47 tag that is not a dayjs locale id also fails.

Fix. Import the module first, for example import "dayjs/locale/fr", then pass the dayjs id to locale. See Locales.

Picker opens immediately

Symptom. Overlay or popover appears on mount without a user click.

Cause. Non-inline React and vanilla pickers default defaultOpen to true.

Fix. Set defaultOpen={false} / defaultOpen: false, or fully control open from your trigger. Web Components keep overlays closed until the open attribute is present.

Solid trying a native import

Symptom. Solid app imports DateTime from universal-datetime-picker or ./solid and breaks.

Cause. The main entry is React. There is no ./solid export.

Fix. Import defineCustomElements from universal-datetime-picker/wc and render datetime-picker* tags. See Solid.

Angular missing schema

Symptom. Template error: not a known element datetime-picker.

Cause. The component or NgModule lacks CUSTOM_ELEMENTS_SCHEMA.

Fix. Add schemas: [CUSTOM_ELEMENTS_SCHEMA] and call registerDateTimePickerElements() at startup. See Angular.