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.

Installation

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

Usage

Globally

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);

app.mount('#app');

Locally

In the .vue files

With Options API

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

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

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';

Browser

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="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>

Add CSS file

<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

Register and use the component

<script>
    const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
    }).mount("#app");
</script>

That’s it, you are ready to go.

Props

• 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.