Vue

Try the live Vue demo for interactive picker and copy-paste snippets.

Support tier

Full support through Web Components. Register once from universal-datetime-picker/vue, then use datetime-picker* tags in templates. Configure isCustomElement for those tags.

Install + deps

npm install universal-datetime-picker

Works with Vue 3. React peers are not required.

Setup

Call defineCustomElements() in main.ts (or a plugin), import the stylesheet, and tell the Vue compiler that datetime-picker* tags are custom elements.

Exact import path

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

defineCustomElements();

Minimal example

// 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>

Realistic example

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

const date = ref<Date | null>(null);
const range = ref<{ start: Date | null; end: Date | null }>({
  start: null,
  end: null,
});

function onDateChange(e: CustomEvent) {
  date.value = e.detail instanceof Date ? e.detail : null;
}

function onRangeChange(e: CustomEvent) {
  range.value = e.detail as { start: Date | null; end: Date | null };
}
</script>

<template>
  <datetime-picker-input
    placeholder="Pick date & time"
    as-string="false"
    @change="onDateChange"
  />
  <datetime-picker-range
    inline
    as-string="false"
    @change="onRangeChange"
  />
</template>

Configuration notes

Register once at app startup, not inside every SFC.
Attributes are kebab-case on the custom elements: as-string, show-seconds, and so on.
Vite and Vue CLI both accept app.config.compilerOptions.isCustomElement. For vue-loader / SFC compiler options, mirror the same tag.startsWith("datetime-picker") check.
Nuxt needs a .client plugin and ClientOnly. See Nuxt.

Events

@change: event.detail is the selected value
@openchange: event.detail is the open boolean

Customization links

Pitfalls

Skipping isCustomElement produces Vue warnings about unresolved components for datetime-picker*.
Registering inside a component that re-runs is wasteful. Registration is idempotent, but keep it in main.ts.
SSR frameworks must not define custom elements on the server. Use the Nuxt pattern for Nuxt apps.

Troubleshooting

CE compiler warnings and SSR issues are listed under Troubleshooting.

Vue