@vuepic/vue-datepicker

The most complete datepicker solution for Vue 3

DOCUMENTATION

StackBlitz Playground

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

1# npm
2npm install @vuepic/vue-datepicker
3
4# yarn
5yarn add @vuepic/vue-datepicker
6
7# pnpm
8pnpm add @vuepic/vue-datepicker
9
10# bun
11bun add @vuepic/vue-datepicker

Import and register component

Global

1import { createApp } from 'vue';
2import App from './App.vue';
3
4import VueDatePicker from '@vuepic/vue-datepicker';
5import '@vuepic/vue-datepicker/dist/main.css';
6
7const app = createApp(App);
8app.component('VueDatePicker', VueDatePicker);

Local

1<template>
2  <VueDatePicker v-model="date" />
3</template>
4
5<script setup>
6  import { ref } from 'vue';
7  import VueDatePicker from '@vuepic/vue-datepicker';
8  import '@vuepic/vue-datepicker/dist/main.css';
9
10  const date = ref(null);
11</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

Special thanks to our sponsors 🙏

Contributors

Thanks to all people who contributed to the project 🙏

Versioning

This project follows SemVer specification

License

Copyright © 2021-present Vuepic

MIT