Vue Date Pick

1.5.1 · maintenance · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Unknown custom element: <date-pick> - did you register the component correctly?
```
cause 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.
```
cause 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.
```
cause 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.

Warnings

gotcha 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.
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.
gotcha 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.
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.
deprecated 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.
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.

Install

npm install vue-date-pick npm
yarn add vue-date-pick yarn
pnpm add vue-date-pick pnpm

Imports

DatePick
wrong:
```
import { DatePick } from 'vue-date-pick';
```
correct:
```
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
wrong:
```
/* Missing CSS import */
```
correct:
```
import 'vue-date-pick/dist/vueDatePick.css';
```
The component's default styling requires this explicit CSS import in your main application entry point or a root component.
DatePick (CommonJS)
wrong:
```
const DatePick = require('vue-date-pick');
```
correct:
```
const DatePick = require('vue-date-pick').default;
```
For CommonJS environments, the component is exposed as the default export of the module.

Quickstart

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

view raw JSON →