npm install universal-datetime-picker

Vue date time picker

Vue 3 apps register datetime-picker custom elements once (main.ts or a plugin), then use tags in templates with @change handlers. Configure compilerOptions.isCustomElement for datetime-picker* so Vue treats them as native custom elements. The live demo below mirrors a typical SFC setup.

Web Components with defineCustomElements from ./vue.

Try the live demo

npm install universal-datetime-picker

Live demo

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { defineCustomElements } from "universal-datetime-picker/vue";
import "universal-datetime-picker/style.css";

defineCustomElements();

createApp(App)
  .config.compilerOptions.isCustomElement = (tag) =>
    tag.startsWith("datetime-picker")
  .mount("#app");

App.vue

<script setup lang="ts">
import { ref } from "vue";

const date = ref<Date | null>(null);

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

<template>
  <datetime-picker
    inline
    mode="date"
    as-string="false"
    @change="onChange"
  />
  <p>Selected: {{ date }}</p>
</template>

Notes

Register elements once in main.ts (or a Nuxt .client plugin), not in every SFC.
Set compilerOptions.isCustomElement for datetime-picker* so Vue 3 does not warn.
Listen for @change; event.detail is the selected value.

Documentation

Guides for this stack and the shared API.