# universal-datetime-picker

> Open-source date and time picker for React, vanilla JS, Web Components, Vue, Svelte, and Angular. TypeScript, accessible calendar, ranges, themes, and dayjs locales.

universal-datetime-picker is an open-source date picker, date time picker, datetime picker, and date range calendar. It ships native React components plus vanilla JS, Web Components, CDN, and thin Vue / Svelte / Angular registration helpers over the same core.

Install: `npm install universal-datetime-picker`

Entry points: `universal-datetime-picker` (React), `./vanilla`, `./wc`, `./vue`, `./svelte`, `./angular`, `./core`, `./style.css`.

There are no `./solid` or `./preact` exports. Solid and Preact use `./wc`. Preact may also use `preact/compat` with the React entry.

Custom elements: `<datetime-picker>`, `<datetime-picker-input>`, `<datetime-picker-range>`. Events: `change`, `openchange`.

CDN: jsDelivr IIFE at `.../dist/cdn/universal-datetime-picker.iife.js`; CSS at `.../dist/style.css`. Pin a version in production.

## Framework pages and playground

- [Examples playground](https://universal-datetime-picker.vercel.app/examples/): Interactive options + snippets
- [Home](https://universal-datetime-picker.vercel.app/): Vanilla mode switcher (no React on `/`)
- [React](https://universal-datetime-picker.vercel.app/react/): Native DateTime, Input, and Range components.
- [Vue](https://universal-datetime-picker.vercel.app/vue/): Register custom elements once, use in Vue 3 templates.
- [Svelte](https://universal-datetime-picker.vercel.app/svelte/): Custom elements with familiar Svelte event bindings.
- [Angular](https://universal-datetime-picker.vercel.app/angular/): Use datetime-picker tags in Angular templates.
- [Vanilla JS](https://universal-datetime-picker.vercel.app/vanilla/): Mount pickers with createDateTimePicker. No framework.
- [Web Components](https://universal-datetime-picker.vercel.app/web-components/): datetime-picker tags in any HTML or app.
- [CDN](https://universal-datetime-picker.vercel.app/cdn/): Drop in jsDelivr CSS + script; no build step.
- [Solid](https://universal-datetime-picker.vercel.app/solid/): Web Components with Solid signals (no ./solid export).
- [Preact](https://universal-datetime-picker.vercel.app/preact/): Web Components in Preact (no ./preact export).
- [Next.js](https://universal-datetime-picker.vercel.app/nextjs/): Client components in the App Router.
- [Nuxt](https://universal-datetime-picker.vercel.app/nuxt/): Client-only islands and a Nuxt plugin.

## Docs

- [Overview](https://universal-datetime-picker.vercel.app/docs/)
- [Getting started](https://universal-datetime-picker.vercel.app/docs/getting-started/)
- [Entry points](https://universal-datetime-picker.vercel.app/docs/entry-points/)
- [Components](https://universal-datetime-picker.vercel.app/docs/components/)
- [Props](https://universal-datetime-picker.vercel.app/docs/props/)
- [Overlay & triggers](https://universal-datetime-picker.vercel.app/docs/overlay/)
- [Date range](https://universal-datetime-picker.vercel.app/docs/range/)
- [Theming](https://universal-datetime-picker.vercel.app/docs/theming/)
- [Locales](https://universal-datetime-picker.vercel.app/docs/locales/)
- [React](https://universal-datetime-picker.vercel.app/docs/react/)
- [Next.js](https://universal-datetime-picker.vercel.app/docs/nextjs/)
- [Vanilla](https://universal-datetime-picker.vercel.app/docs/vanilla/)
- [Web Components & CDN](https://universal-datetime-picker.vercel.app/docs/web-components/)
- [Vue](https://universal-datetime-picker.vercel.app/docs/vue/)
- [Nuxt](https://universal-datetime-picker.vercel.app/docs/nuxt/)
- [Svelte](https://universal-datetime-picker.vercel.app/docs/svelte/)
- [Angular](https://universal-datetime-picker.vercel.app/docs/angular/)
- [Solid](https://universal-datetime-picker.vercel.app/docs/solid/)
- [Preact](https://universal-datetime-picker.vercel.app/docs/preact/)
- [FAQ](https://universal-datetime-picker.vercel.app/docs/faq/)
- [Troubleshooting](https://universal-datetime-picker.vercel.app/docs/troubleshooting/)
- [Migration](https://universal-datetime-picker.vercel.app/docs/migration/)
- [Full LLM context](https://universal-datetime-picker.vercel.app/llms-full.txt)
- [Changelog](https://universal-datetime-picker.vercel.app/changelog/)
- [README](https://github.com/Bhardwaj-Raghav/universal-datetime-picker/blob/main/README.md)
- [npm](https://www.npmjs.com/package/universal-datetime-picker)

## Examples

- [Examples playground](https://universal-datetime-picker.vercel.app/examples/)
- [GitHub repository](https://github.com/Bhardwaj-Raghav/universal-datetime-picker)