{"id":12450,"library":"vue-date-pick","title":"Vue Date Pick","description":"Vue Date Pick is a lightweight and mobile-friendly date and time picker component built for Vue.js applications. Currently stable at version 1.5.1, it was last published approximately four years ago, suggesting a maintenance-only status rather than active development. A key differentiator is its explicit lack of external dependencies on CSS frameworks or date manipulation libraries, resulting in a minimal footprint (less than 5KB). It emphasizes performance, an elegant and usable UI across various screen sizes, and straightforward configuration. While its primary target appears to be Vue 2 given its last update date and common usage patterns, it can be integrated using standard Vue component registration methods. The project offers a comprehensive demo and documentation pages for usage and customization.","status":"maintenance","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/dbrekalo/vue-date-pick","tags":["javascript","datepicker","datetimepicker","date","time","picker","pick","vue"],"install":[{"cmd":"npm install vue-date-pick","lang":"bash","label":"npm"},{"cmd":"yarn add vue-date-pick","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-date-pick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it is a Vue component. Requires Vue 2.x for full compatibility due to the project's last update date.","package":"vue","optional":false}],"imports":[{"note":"The component is typically exported as a default export from the main package entry. Named imports are not the standard way to get the component itself.","wrong":"import { DatePick } from 'vue-date-pick';","symbol":"DatePick","correct":"import DatePick from 'vue-date-pick';"},{"note":"The component's default styling requires this explicit CSS import in your main application entry point or a root component.","wrong":"/* Missing CSS import */","symbol":"CSS Styles","correct":"import 'vue-date-pick/dist/vueDatePick.css';"},{"note":"For CommonJS environments, the component is exposed as the default export of the module.","wrong":"const DatePick = require('vue-date-pick');","symbol":"DatePick (CommonJS)","correct":"const DatePick = require('vue-date-pick').default;"}],"quickstart":{"code":"import Vue from 'vue';\nimport DatePick from 'vue-date-pick';\nimport 'vue-date-pick/dist/vueDatePick.css';\n\nnew Vue({\n  el: '#app',\n  components: {\n    DatePick\n  },\n  data: {\n    selectedDate: new Date().toISOString().substring(0, 10)\n  },\n  template: `\n    <div id=\"app\">\n      <h1>Vue Date Pick Demo</h1>\n      <p>Selected Date: {{ selectedDate }}</p>\n      <date-pick\n        v-model=\"selectedDate\"\n        :has-time=\"true\"\n        :start-date=\"new Date()\"\n        :display-format=\"'YYYY-MM-DD HH:mm'\"\n      ></date-pick>\n    </div>\n  `\n});","lang":"javascript","description":"This quickstart demonstrates how to install, import, and locally register `vue-date-pick` within a basic Vue 2 application, displaying a date and time picker that updates a data property via `v-model`."},"warnings":[{"fix":"For Vue 3 projects, consider using more actively maintained date pickers like `@vuepic/vue-datepicker` or `vue3-datepicker` which are built specifically for Vue 3.","message":"The package was last published four years ago, primarily targeting Vue 2. Using it directly in a Vue 3 project may lead to compatibility issues or require a compatibility build if the project doesn't explicitly support Vue 3.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `import 'vue-date-pick/dist/vueDatePick.css';` to your main JavaScript file (e.g., `main.js` or `app.js`) or the component where `vue-date-pick` is used.","message":"The default styles for `vue-date-pick` are not automatically applied. You must explicitly import the component's CSS file in your application to ensure proper rendering and functionality.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For long-term projects or those requiring active support and new features, it's advisable to evaluate more actively maintained alternatives. Ensure thorough testing for existing deployments.","message":"The project is in maintenance mode with no recent updates (last publish 4 years ago). This means there will be no new features, and potential bugs or security vulnerabilities might not be addressed.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `DatePick` is imported and added to the `components` option of your Vue component (e.g., `components: { DatePick }`) or globally registered using `Vue.component('date-pick', DatePick);`.","cause":"The `date-pick` component was not registered either globally or locally within the Vue component using it.","error":"[Vue warn]: Unknown custom element: <date-pick> - did you register the component correctly?"},{"fix":"Add `import 'vue-date-pick/dist/vueDatePick.css';` to your application's entry file (e.g., `main.js`) or a top-level component.","cause":"The required CSS file for `vue-date-pick` was not imported into the application.","error":"Picker UI appears unstyled or misaligned, looking like raw HTML elements."},{"fix":"Review the documentation for `display-format` and `custom date parser` options. Ensure the `display-format` prop matches the desired output format, adhering to moment.js-like formatting strings.","cause":"The `display-format` prop is either missing, incorrect, or a custom date parser is needed for complex date strings.","error":"Dates displayed or parsed are incorrect or in an unexpected format."}],"ecosystem":"npm"}