Registry / web-framework / vue-date-pick

vue-date-pick

library1.5.1jsnpmunverified

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.

web-framework

npm install vue-date-pick

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-DATE-PICK

vue-date-pick

web-frameworkjavascriptv1.5.1

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.

DatePick

✓ import DatePick from 'vue-date-pick';

✗ import { DatePick } from 'vue-date-pick';

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.

CSS Styles

✓ import 'vue-date-pick/dist/vueDatePick.css';

✗ /* Missing CSS import */

The component's default styling requires this explicit CSS import in your main application entry point or a root component.

DatePick (CommonJS)

✓ const DatePick = require('vue-date-pick').default;

✗ const DatePick = require('vue-date-pick');

For CommonJS environments, the component is exposed as the default export of the module.

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`.

import Vue from 'vue'; import DatePick from 'vue-date-pick'; import 'vue-date-pick/dist/vueDatePick.css'; new Vue({ el: '#app', components: { DatePick }, data: { selectedDate: new Date().toISOString().substring(0, 10) }, template: ` <div id="app"> <h1>Vue Date Pick Demo</h1> <p>Selected Date: {{ selectedDate }}</p> <date-pick v-model="selectedDate" :has-time="true" :start-date="new Date()" :display-format="'YYYY-MM-DD HH:mm'" ></date-pick> </div> ` });

Debug

Known issues

gotchaThe 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.

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.

affects: >=1.0.0

gotchaThe 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.

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.

affects: >=1.0.0

deprecatedThe 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

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

The `date-pick` component was not registered either globally or locally within the Vue component using it.

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);`.

Picker UI appears unstyled or misaligned, looking like raw HTML elements.

The required CSS file for `vue-date-pick` was not imported into the application.

fix

Add `import 'vue-date-pick/dist/vueDatePick.css';` to your application's entry file (e.g., `main.js`) or a top-level component.

Dates displayed or parsed are incorrect or in an unexpected format.

The `display-format` prop is either missing, incorrect, or a custom date parser is needed for complex date strings.

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.

Upgrade

Version history

1.5.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency as it is a Vue component. Requires Vue 2.x for full compatibility due to the project's last update date.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dbrekalo/vue-date-pick ↗

packagehttps://www.npmjs.com/package/vue-date-pick ↗

homepagehttps://vue-date-pick.netlify.app ↗