# @vuepic/vue-datepicker

> Datepicker component for Vue 3

Latest version **14.0.0** (published 2026-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vuepic/vue-datepicker
pnpm add @vuepic/vue-datepicker
yarn add @vuepic/vue-datepicker
bun add @vuepic/vue-datepicker
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 14.0.0 |
| Published | 2026-06-02 |
| First published | 2022-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=18.12.0 |
| Dependencies | 4 |
| Unpacked size | 230.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1766 |
| Author | Vuepic |
| Maintainers | thechief |
| Keywords | date, datepicker, daterangepicker, datetimepicker, vue, vue-datepicker, vue3-datepicker |

## Links

- npm: https://www.npmjs.com/package/@vuepic/vue-datepicker
- Repository: https://github.com/Vuepic/vue-datepicker
- Homepage: https://vue3datepicker.com
- Issues: https://github.com/Vuepic/vue-datepicker/issues
- npm.io page: https://npm.io/package/@vuepic/vue-datepicker

## Dependencies (4)

- [date-fns](https://npm.io/package/date-fns.md) ^4.4.0
- [@date-fns/tz](https://npm.io/package/@date-fns/tz.md) ^1.5.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^14.3.0
- [@floating-ui/vue](https://npm.io/package/@floating-ui/vue.md) ^1.1.11

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 14.0.0 (latest) — 2026-06-02
- 3.6.0-alpha.1 (alpha) — 2022-11-18
- 13.0.0 — 2026-05-24
- 12.1.0 — 2025-12-07
- 12.0.5 — 2025-11-17
- 12.0.4 — 2025-11-12
- 12.0.3 — 2025-11-07
- 12.0.2 — 2025-11-05
- 12.0.1 — 2025-11-03
- 12.0.0 — 2025-11-02
- 11.0.3 — 2025-10-17
- 11.0.2 — 2025-03-16
- 11.0.1 — 2025-01-09
- 11.0.0 — 2025-01-07
- 10.0.0 — 2024-11-04
- … 82 more at https://npm.io/package/@vuepic/vue-datepicker/versions

## README

## @vuepic/vue-datepicker


### The most complete datepicker solution for Vue 3

[![License](https://img.shields.io/npm/l/@vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@vuepic/vue-datepicker)](https://www.npmjs.com/package/@vuepic/vue-datepicker) ![Downloads](https://img.shields.io/npm/dm/@vuepic/vue-datepicker) [![Open issues](https://img.shields.io/github/issues-raw/Vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/issues) ![CI](https://img.shields.io/github/actions/workflow/status/Vuepic/vue-datepicker/node.js.yml?branch=main&label=CI)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Vuepic_vue-datepicker&metric=alert_status)](https://sonarcloud.io/project/overview?id=Vuepic_vue-datepicker)




[DOCUMENTATION](https://vue3datepicker.com/)


[StackBlitz Playground](https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue)

## Features

- Single date picker
- Range date picker
- Time picker
- Month picker
- Year picker
- Quarter picker
- Week picker
- Multiple dates select
- Multiple calendars
- Text input
- UTC support
- Timezones
- Locale support
- Week numbers
- Custom `v-model`
- Dark and light theme
- SSR support
- Highly configurable
- Accessible
- Included type definitions

## Install

```shell
# npm
npm install @vuepic/vue-datepicker

# yarn
yarn add @vuepic/vue-datepicker

# pnpm
pnpm add @vuepic/vue-datepicker

# bun
bun add @vuepic/vue-datepicker
```

### Import and register component

**Global**

```js
import { createApp } from 'vue';
import App from './App.vue';

import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const app = createApp(App);
app.component('VueDatePicker', VueDatePicker);
```

**Local**

```vue
<template>
  <VueDatePicker v-model="date" />
</template>

<script setup>
  import { ref } from 'vue';
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css';

  const date = ref(null);
</script>
```

## Supporting the project

As you may know, maintaining an open-source project is a very time-consuming job. Your support is very appreciated ❤️

Please ⭐️ this repository if you like the component!

You can also make a financial contribution via sponsoring this project or one-time donation. [Become a sponsor](https://github.com/sponsors/Vuepic)


## Contributors

Thanks to all people who contributed to the project 🙏

<a href="https://github.com/Vuepic/vue-datepicker/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=Vuepic/vue-datepicker" alt="contributors" />
</a>

## Versioning

This project follows [SemVer](https://semver.org) specification

## License

Copyright © 2021-present [Vuepic](https://github.com/Vuepic)

[MIT](https://github.com/Vuepic/vue-datepicker/blob/master/LICENSE)

---
_Source: https://npm.io/package/@vuepic/vue-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._