Installation

NPM

            
npm i @alireza-ab/vue-persian-datepicker

Import and usage

                
import datePicker from '@alireza-ab/vue-persian-datepicker'

new Vue({
    components: {
        datePicker
    },
    el: '#app'
})
OR 
            
import datePicker from '@alireza-ab/vue-persian-datepicker'

Vue.component('date-picker', datePicker)

If you need to work with dates, you can use PersianDate.

            
import datePicker, {PersianDate} from '@alireza-ab/vue-persian-datepicker'

PersianDate documentation is here!

You can also use it in a component

            
<template>
    <div>
        <date-picker></date-picker>
    </div>
</template>

<script>
    import datePicker from '@alireza-ab/vue-persian-datepicker'
    export default {
        components: {
            datePicker
        }
    }
</script>

Nuxt 2.0.0+

            
npm i @alireza-ab/vue-persian-datepicker sass sass-loader

Add to the buildModules section of nuxt.confing.js:

                
export default {
    buildModules: [
        '@alireza-ab/vue-persian-datepicker/nuxt'
    ]
}

The components option in nuxt.confing.js should be true.

If you want to use PersianDate: 
                
export default {
    buildModules: [
        ['@alireza-ab/vue-persian-datepicker/nuxt', { PersianDate: true }]
    ]
}

How to use PersianDate in Nuxt?

If you are using Nuxt < v2.9, you have to use modules section in nuxt.config.js instead of buildModules.

CDN

This package is availabe on jsdelivery and unpkg 

            
<script src="https://cdn.jsdelivr.net/npm/@alireza-ab/vue-persian-datepicker@2.3.0/dist/datepicker.min.js"></script>
OR 
            
<script src="https://unpkg.com/@alireza-ab/vue-persian-datepicker@2.3.0/dist/datepicker.min.js"></script>

Example

            
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue app</title>
</head>
<body>
    <div id="app">
        <date-picker></date-picker>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@alireza-ab/vue-persian-datepicker@2.3.0/dist/datepicker.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            components:{
                datePicker
            }
        })
    </script>
</body>
</html>