{"id":12452,"library":"vue-datetime","title":"Mobile-friendly Datetime Picker for Vue 2","description":"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.","status":"active","version":"1.0.0-beta.14","language":"javascript","source_language":"en","source_url":"https://github.com/mariomka/vue-datetime","tags":["javascript","datetime","datetime-picker","picker","date","vue"],"install":[{"cmd":"npm install vue-datetime","lang":"bash","label":"npm"},{"cmd":"yarn add vue-datetime","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-datetime","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for date and time manipulation.","package":"luxon","optional":false},{"reason":"Peer dependency for the Vue.js framework.","package":"vue","optional":false},{"reason":"Optional dependency used to determine the first day of the week. Can be omitted if locale-based auto-detection is preferred.","package":"weekstart","optional":true}],"imports":[{"note":"The main component, exported as a named export. Typically registered globally with `Vue.use(Datetime)` or locally within a Vue component's `components` option.","wrong":"import Datetime from 'vue-datetime'","symbol":"Datetime","correct":"import { Datetime } from 'vue-datetime'"},{"note":"Essential for the component's visual appearance and proper rendering. Must be imported separately from the JavaScript component.","symbol":"CSS styles","correct":"import 'vue-datetime/dist/vue-datetime.css'"},{"note":"Registers the `<datetime>` component globally across your Vue application. For local component registration, add `datetime: Datetime` to your component's `components` option.","wrong":"import { use } from 'vue'; use(Datetime);","symbol":"Vue.use(Datetime)","correct":"import Vue from 'vue';\nimport { Datetime } from 'vue-datetime';\nVue.use(Datetime);"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Vue Datetime Picker Demo</h1>\n    <datetime v-model=\"selectedDate\" type=\"datetime\" input-id=\"my-datetime-picker\"></datetime>\n    <p>Selected Datetime (ISO 8601): <strong>{{ selectedDate }}</strong></p>\n    <p>Using type=\"date\":</p>\n    <datetime v-model=\"selectedDateOnly\" type=\"date\"></datetime>\n    <p>Selected Date: <strong>{{ selectedDateOnly }}</strong></p>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport { Datetime } from 'vue-datetime';\nimport 'vue-datetime/dist/vue-datetime.css';\n\n// Luxon is a peer dependency but doesn't need to be imported directly here.\n// Ensure it's installed: npm install luxon\n\n// Register the component globally\nVue.use(Datetime);\n\nexport default {\n  name: 'App',\n  data() {\n    return {\n      selectedDate: new Date().toISOString(), // Initialize with current ISO string\n      selectedDateOnly: new Date().toISOString().split('T')[0] + 'T00:00:00.000Z'\n    };\n  }\n};\n</script>\n\n<style>\nbody {\n  font-family: Arial, sans-serif;\n  margin: 20px;\n  background-color: #f8f8f8;\n}\nh1 {\n  color: #333;\n  margin-bottom: 20px;\n}\np {\n  margin-top: 15px;\n  font-size: 1.1em;\n}\nstrong {\n  color: #007bff;\n}\n/* Basic styling for the picker input */\n#my-datetime-picker {\n  padding: 8px 12px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 1em;\n  width: 250px;\n  margin-bottom: 20px;\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0-beta.1"},{"fix":"Ensure `luxon` and `vue` are installed in your project: `npm install luxon vue` or `yarn add luxon vue`.","message":"This 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.","severity":"gotcha","affected_versions":">=1.0.0-beta.1"},{"fix":"Add `import 'vue-datetime/dist/vue-datetime.css'` to your main application entry file or component where `vue-datetime` is used.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0-beta.1"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0-beta.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Register `Datetime` globally with `Vue.use(Datetime)` after importing it, or locally within your component's `components` option: `components: { Datetime }`.","cause":"The `Datetime` component was not registered globally via `Vue.use()` or locally in the `components` option of a Vue component.","error":"[Vue warn]: Unknown custom element: <datetime> - did you register the component correctly?"},{"fix":"Install `luxon` as a project dependency: `npm install luxon` or `yarn add luxon`.","cause":"The `luxon` peer dependency, required by `vue-datetime` for date manipulation, is missing from your project's `node_modules`.","error":"Module not found: Error: Can't resolve 'luxon' in '...'"}],"ecosystem":"npm"}