v2.1.3 · React · Vanilla · Vue · Svelte · Angular · and more

universal-datetime-picker

A date and time picker for any framework.

Date, time, datetime, and ranges in one package. Use it from React, Vue, Svelte, Angular, vanilla JS, or a CDN script.

Open examples Read docs

npm install universal-datetime-picker

Selected: null

Get running

Install once, then import the entry for your stack. Tabs below show the shortest path for each.

import { useState } from "react";
import { DateTimeInput } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

function App() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateTimeInput
      asString={false}
      value={value}
      onChange={(next) => setValue(next instanceof Date ? next : null)}
    />
  );
}

Open the React page →

Built for real forms

Works everywhere

Native React plus Web Components and vanilla createDateTimePicker. Vue, Svelte, Angular, plain HTML, and CDN from one package.

Pick and go

Date-only overlays commit on day click. Datetime and time keep OK so you can set the clock first. DateTimeInput adds a calendar icon, customInput, and noStyle.

Accessible calendar

Dialog semantics, focus trap, Escape to dismiss, and arrow-key navigation. Opens on the first or last selectable day when bounds apply.

Typed values & themes

Omit asString for Date and TimeValue. CSS-variable themes, 12-hour clocks, locales, and TypeScript across ESM/CJS.

Try it live

Tune options in the playground, or open a framework page for install notes and a focused demo.

Open playground