npm install universal-datetime-picker

Svelte date time picker

Svelte projects call defineCustomElements() from universal-datetime-picker/svelte during app startup, then bind onchange on datetime-picker, datetime-picker-input, or datetime-picker-range. You get the same calendar UI as React with Svelte-friendly event wiring and shared CSS-variable theming.

Custom elements with onchange in Svelte 5.

Try the live demo

npm install universal-datetime-picker

Live demo

+layout.ts (register once)

import { defineCustomElements } from "universal-datetime-picker/svelte";
import "universal-datetime-picker/style.css";

defineCustomElements();

Page component

<script lang="ts">
  let date = $state<Date | null>(null);

  function onChange(e: CustomEvent) {
    const next = e.detail;
    date = next instanceof Date ? next : null;
  }
</script>

<datetime-picker inline mode="date" as-string="false" onchange={onChange}></datetime-picker>
<p>Selected: {date ?? "null"}</p>

Notes

Call defineCustomElements() once in root +layout.ts (or equivalent app entry), not in every component.
On Svelte 5 custom elements, use onchange={...} for the native change CustomEvent (not on:change).
Use explicit closing tags for custom elements (Svelte 5 rejects self-closing non-void tags).
The svelte entry also exports a calendarTime action that only registers elements.

Documentation

Guides for this stack and the shared API.