{"id":12640,"library":"vuejs3-datepicker","title":"Vue 3 Datepicker","description":"Vuejs3-datepicker is a lightweight and configurable datepicker component designed exclusively for Vue 3 applications. Currently at version 1.1.3, the library receives updates approximately every few months, addressing bug fixes, adding new features like internationalization (e.g., Arabic-Tunisia), and internal build system improvements (e.g., Vite migration). Its core functionality includes standard date picking, support for `v-model` for two-way data binding, customizable date formatting, and options for disabling or highlighting specific dates. A key differentiator is its strict compatibility with Vue 3, making it a focused solution for modern Vue projects, unlike some older datepickers that might still support Vue 2.","status":"active","version":"1.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/shubhadip/vuejs3-datepicker","tags":["javascript","vue","vuejs","vue 3","typescript","vue-component","date","library"],"install":[{"cmd":"npm install vuejs3-datepicker","lang":"bash","label":"npm"},{"cmd":"yarn add vuejs3-datepicker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuejs3-datepicker","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The component is a default export. Primarily designed for ESM environments with Vue 3. Using CommonJS `require` might lead to bundler issues or require specific configuration.","wrong":"const Datepicker = require('vuejs3-datepicker');","symbol":"Datepicker","correct":"import Datepicker from 'vuejs3-datepicker';"},{"note":"For global registration in Vue 3, use `app.component` (after creating your Vue app instance). Direct use of `Vue.component` is for Vue 2 applications.","wrong":"Vue.component('Datepicker', Datepicker);","symbol":"Datepicker (Global Registration)","correct":"import Datepicker from 'vuejs3-datepicker';\n\napp.component('Datepicker', Datepicker);"},{"note":"Ensure to import the default CSS styles for the datepicker to render correctly. You can override styles with `calendar-class` or `input-class` props.","symbol":"CSS Styles","correct":"import 'vuejs3-datepicker/dist/vuejs3-datepicker.css';"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h2>Select a Date</h2>\n    <datepicker v-model=\"selectedDate\" :format=\"'dd MMMM yyyy'\"\n                :clear-button=\"true\" :monday-first=\"true\"\n                @selected=\"handleDateSelection\" @closed=\"handleCalendarClose\">\n    </datepicker>\n    <p>Selected Date: {{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}</p>\n    <button @click=\"clearDate\">Clear Date</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport Datepicker from 'vuejs3-datepicker';\n\nconst selectedDate = ref<Date | null>(new Date());\n\nconst handleDateSelection = (date: Date) => {\n  console.log('Date selected:', date);\n  // v-model already updates selectedDate, but you can add other logic here.\n};\n\nconst handleCalendarClose = () => {\n  console.log('Datepicker closed.');\n};\n\nconst clearDate = () => {\n  selectedDate.value = null;\n};\n</script>\n\n<style>\n/* Basic styling for demonstration, replace with your project's styles */\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates a basic Vue 3 setup using the `vuejs3-datepicker` component. It shows importing the component, using `v-model` for two-way binding, custom date formatting, enabling the clear button, setting Monday as the first day of the week, and handling `selected` and `closed` events. It also includes a programmatic way to clear the date."},"warnings":[{"fix":"Ensure your project is built with Vue 3. If you need Vue 2 compatibility, use a different datepicker library.","message":"This library is exclusively compatible with Vue 3. Attempting to use it in a Vue 2 project will result in runtime errors due to fundamental API differences.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Prefer using `v-model=\"yourDateVariable\"` for two-way data binding. If you need one-way binding, you can pass `:value=\"yourDateVariable\"` and listen to the `@selected` event for updates.","message":"The `value` prop and `v-model` both control the date. While `v-model` internally uses `modelValue` and `update:modelValue` in Vue 3, this component also exposes a `value` prop. It's recommended to primarily use `v-model` for consistency and idiomatic Vue 3 data binding.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install and configure the desired icon library (e.g., `npm install @fortawesome/fontawesome-free` and import its CSS) in your Vue application.","message":"If you utilize the `clear-button` or `calendar-button` props and specify an `icon` (e.g., `fa fa-times`), you must ensure that the corresponding icon library (like Font Awesome) is separately installed and imported into your project. The component does not bundle these icons.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No direct fix required for most users, but be aware of potential subtle behavioral changes if you extensively customize Vue directives that might interact with the datepicker's internal rendering.","message":"The v1.1.3 release included a bug fix for 'update hook name for directives'. While marked as a fix, this indicates an internal adjustment related to Vue 3's directive lifecycle hooks. Developers with highly customized directives interacting with this component might need to verify behavior, although it's unlikely to affect standard usage.","severity":"gotcha","affected_versions":">=1.1.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import Datepicker from 'vuejs3-datepicker';` in your script and that it's correctly registered in your component's `components` option or globally with `app.component('Datepicker', Datepicker)`.","cause":"The Datepicker component was not correctly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: Datepicker"},{"fix":"Always check if your date variable is not `null` or `undefined` before attempting to call `Date` object methods on it, e.g., `selectedDate.value ? selectedDate.value.toLocaleDateString() : 'No date'`.","cause":"Attempting to call methods on a `Date` object when the bound variable is `null` or `undefined` (e.g., when the date is cleared).","error":"TypeError: Cannot read properties of null (reading 'toLocaleDateString')"},{"fix":"Ensure that the `value` or `v-model` prop is always bound to a valid JavaScript `Date` object or `null` if no date is selected. If passing a string, ensure it's in a format the component can natively parse, or convert it to a `Date` object before passing.","cause":"The `value` or `v-model` prop was passed a value that is not a JavaScript `Date` object, but a string or other type that the component could not parse into a valid Date.","error":"TypeError: date.getFullYear is not a function"},{"fix":"Add `import 'vuejs3-datepicker/dist/vuejs3-datepicker.css';` to your main Vue entry file (e.g., `main.ts` or `main.js`) or within a component's style block if using a build system that supports it.","cause":"The component's default CSS styles were not imported into the project.","error":"Styles are not applied, datepicker looks unstyled."}],"ecosystem":"npm"}