Blog Detail


The Most Complete & Amazing Datepicker Solution for Vue 3 cover image

arrow_back The Most Complete & Amazing Datepicker Solution for Vue 3

Vuepic comes up with an amazing vue 3 date picker component that is called Vue-datepicker. It has many options and features like theme customization, multi-calendar, month picker, time picker, auto range, etc.


You can install the component using the preferred package manager like npm or yarn:

yarn add @vuepic/vue-datepicker

# or

npm install @vuepic/vue-datepicker

Then import and register component

Note: Css file is imported separately



In the main file

import { createApp } from "vue";
import App from './App.vue';

import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const app = createApp(App);

app.component('Datepicker', Datepicker);



In the .vue files

With Options API

    <Datepicker v-model="date"></Datepicker>

    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css'
    export default {
        components: { Datepicker },
        data() {
            return {
                date: null,

Alternatively, you can import the scss file if you want full control of the component styles

@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';


Register and use components in the .html file

Keep in mind that when you use unpkg to import the component, global component name will be VueDatePicker

Add JavaScript files

<script src=""></script>
<script src=""></script>

Add CSS file

<link rel="stylesheet" href="">

Register and use the component

    const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },

That’s it, you are ready to go.


  • Range
  • AutoRange
  • MultiCalendars
  • MonthPicker
  • TimePicker
  • TextInput
  • Inline
  • MultiDates
  • Flow
  • Utc
  • WeekPicker
  • Vertical
  • Modes configuration
  • Formatting
  • Localization
  • General configuration
  • Calendar configuration

This package has a lot of features and options with code examples, If you want to learn more you can visit its complete documentation on Github.

Published at : 11-04-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project