@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

# 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

Copyright © 2021-present Vuepic

MIT

License

RAW-technology/vue-datepicker

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages