vue-datepicker-next

vue-datepicker-next is a datepicker and datetimepicker component built for Vue 3. It provides a single DatePicker component that, through a type prop, covers date, datetime, week, month, and year selection, plus range picking for start/end values. Two-way binding uses Vue 3’s v-model:value convention, so wiring it into forms is straightforward.

The component is the Vue 3 successor to the popular vue2-datepicker and keeps a similar API while embracing the Composition-era ecosystem. It ships localization support for many languages, customizable formatting via date-format-parse, and slots for tailoring the calendar UI, making it a practical choice for forms, dashboards, and scheduling interfaces.

What You Get

• A single DatePicker component covering date, datetime, week, month, and year modes
• Range selection for picking start and end values
• Two-way binding via Vue 3’s v-model:value convention
• Configurable date formatting and parsing through date-format-parse
• Built-in localization for many languages plus slots for UI customization

Common Use Cases

• Date and datetime inputs in Vue 3 forms and filters
• Date-range pickers for reports, bookings, and analytics dashboards
• Month/year/week selection for scheduling and planning UIs
• Localized calendar inputs in internationalized applications

Under The Hood

Architecture - The source under src/ is organized around a top-level DatePicker.tsx that composes a Picker, PickerInput, and Popup, delegating to mode-specific panels in calendar/, datetime/, and time/. Shared state flows through context.ts, and formatting/locale concerns live in locale.ts and util/. The component is authored in TSX and Vue SFCs and compiled to a distributable lib/.

Tech Stack - Written in TypeScript/TSX targeting Vue 3 (peer dependency vue ^3.0.0), with date-format-parse for date handling. The build pipeline uses Vite and Rollup (including a dedicated rollup.locale.config.js for locale bundles), Babel, and TypeScript configs; styles are authored separately and shipped as index.css.

Code Quality - The project includes a __tests__/ suite run under Jest (with SVG transform handling), commitlint configuration, a maintained CHANGELOG.md, and GitHub Actions test workflows. Development has gone quiet, but the codebase is typed and structured with clear separation between panels, input, and popup layers.

API Design - The API is compact and idiomatic for Vue 3: one component, a type prop to select the mode, v-model:value for binding, and props/slots for formatting and customization. Developers coming from vue2-datepicker will find the concepts familiar, and the demo site documents the full prop surface.