vue-datetime

library1.0.0-beta.14jsnpmunverified

vue-datetime is a mobile-friendly datetime picker component designed for Vue 2 applications. Currently in beta (v1.0.0-beta.14), it provides robust functionalities for selecting dates, datetimes, or times, alongside comprehensive internationalization (i18n) support and the capability to disable specific date ranges. The library depends on Luxon for its underlying date and time manipulation and optionally utilizes `weekstart` to determine the first day of the week, though locale-based auto-detection is available. Distribution occurs via npm, enabling integration within modern JavaScript bundler workflows like Webpack or Rollup, or direct inclusion in browser environments via CDN. While it is under active development, users should be aware of its beta status, which implies that API changes may occur prior to a stable 1.0 release. Its key differentiators include its focus on mobile usability and a highly customizable picker flow and display format, making it suitable for responsive web applications.

web-framework

npm install vue-datetime

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-DATETIME

vue-datetime

web-frameworkjavascriptv1.0.0-beta.14

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Datetime

✓ import { Datetime } from 'vue-datetime'

✗ import Datetime from 'vue-datetime'

The main component, exported as a named export. Typically registered globally with `Vue.use(Datetime)` or locally within a Vue component's `components` option.

CSS styles

✓ import 'vue-datetime/dist/vue-datetime.css'

Essential for the component's visual appearance and proper rendering. Must be imported separately from the JavaScript component.

Vue.use(Datetime)

✓ import Vue from 'vue'; import { Datetime } from 'vue-datetime'; Vue.use(Datetime);

✗ import { use } from 'vue'; use(Datetime);

Registers the `<datetime>` component globally across your Vue application. For local component registration, add `datetime: Datetime` to your component's `components` option.

This quickstart demonstrates how to install, globally register, and use the `vue-datetime` component in a basic Vue 2 application with `v-model` binding for both datetime and date modes.

<template> <div id="app"> <h1>Vue Datetime Picker Demo</h1> <datetime v-model="selectedDate" type="datetime" input-id="my-datetime-picker"></datetime> <p>Selected Datetime (ISO 8601): <strong>{{ selectedDate }}</strong></p> <p>Using type="date":</p> <datetime v-model="selectedDateOnly" type="date"></datetime> <p>Selected Date: <strong>{{ selectedDateOnly }}</strong></p> </div> </template> <script> import Vue from 'vue'; import { Datetime } from 'vue-datetime'; import 'vue-datetime/dist/vue-datetime.css'; // Luxon is a peer dependency but doesn't need to be imported directly here. // Ensure it's installed: npm install luxon // Register the component globally Vue.use(Datetime); export default { name: 'App', data() { return { selectedDate: new Date().toISOString(), // Initialize with current ISO string selectedDateOnly: new Date().toISOString().split('T')[0] + 'T00:00:00.000Z' }; } }; </script> <style> body { font-family: Arial, sans-serif; margin: 20px; background-color: #f8f8f8; } h1 { color: #333; margin-bottom: 20px; } p { margin-top: 15px; font-size: 1.1em; } strong { color: #007bff; } /* Basic styling for the picker input */ #my-datetime-picker { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; width: 250px; margin-bottom: 20px; } </style>

Debug

Known issues

breakingThe package is currently in a beta state (1.0.0-beta.14). API contracts, configuration options, and internal behavior are subject to change without major version bumps until a stable 1.0 release is made. Users should expect potential breaking changes between beta versions.

fix

Refer to the release notes for each beta version and update your code accordingly. Monitor the GitHub repository for updates and future stable releases.

affects: >=1.0.0-beta.1

gotchaThis component has peer dependencies on `luxon` (for date handling) and `vue` (the framework itself). While `weekstart` is also a peer dependency, it's optional; `vue-datetime` will auto-detect the week's start day from the locale if `weekstart` is not provided. Failure to install `luxon` will result in runtime errors.

fix

Ensure `luxon` and `vue` are installed in your project: `npm install luxon vue` or `yarn add luxon vue`.

affects: >=1.0.0-beta.1

gotchaThe component's default styling requires an explicit CSS import: `import 'vue-datetime/dist/vue-datetime.css'`. Without this, the picker will appear unstyled and potentially non-functional visually.

fix

Add `import 'vue-datetime/dist/vue-datetime.css'` to your main application entry file or component where `vue-datetime` is used.

affects: >=1.0.0-beta.1

gotchaThe `v-model` property expects an ISO 8601 formatted string (e.g., `'2026-04-19T10:00:00.000Z'`). Providing other date formats might lead to unexpected behavior, parsing errors, or the picker not displaying the value correctly.

fix

Ensure your `v-model` bound data is always an ISO 8601 string. Use Luxon's `toUTC().toISO()` or similar methods for conversion if necessary.

affects: >=1.0.0-beta.1

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <datetime> - did you register the component correctly?

The `Datetime` component was not registered globally via `Vue.use()` or locally in the `components` option of a Vue component.

fix

Register `Datetime` globally with `Vue.use(Datetime)` after importing it, or locally within your component's `components` option: `components: { Datetime }`.

Module not found: Error: Can't resolve 'luxon' in '...'

The `luxon` peer dependency, required by `vue-datetime` for date manipulation, is missing from your project's `node_modules`.

fix

Install `luxon` as a project dependency: `npm install luxon` or `yarn add luxon`.

Upgrade

Version history

1.0.0-beta.14latest on npm

Audit

Dependencies

luxonrequiredRequired for date and time manipulation.

vuerequiredPeer dependency for the Vue.js framework.

weekstartoptionalOptional dependency used to determine the first day of the week. Can be omitted if locale-based auto-detection is preferred.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mariomka/vue-datetime ↗

packagehttps://www.npmjs.com/package/vue-datetime ↗