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.2.1/dist/datepicker.min.js"></script>
            
        
OR
            
<script src="https://unpkg.com/@alireza-ab/vue-persian-datepicker@2.2.1/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.2.1/dist/datepicker.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            components:{
                datePicker
            }
        })
    </script>
</body>
</html>