Awesome

@vuepic/vue-datepicker

The most complete datepicker solution for Vue 3

Downloads

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

# 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

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

<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

Special thanks to our sponsors 🙏

Contributors

Thanks to all people who contributed to the project 🙏

Versioning

This project follows SemVer specification

License

MIT