Simple persian vue datepicker

A fully support keyboard vue plugin to select jalali (persian) date

Installation 🔌

npm

npm i simple-persian-vue-datepicker

Usage 💻

globally

main.js

//...
import Picker from "simple-persian-vue-datepicker";
import "simple-persian-vue-datepicker/dist/simple-persian-vue-datepicker.css";
 
Vue.component("Picker", Picker);
 
//...

in components

component.vue

 
<template>
 
    <div>
 
        <Picker  v-model="date" />
 
    </div>
 
</template>
 
<script>
 
import Picker from 'simple-persian-vue-datepicker'
 
import "simple-persian-vue-datepicker/dist/simple-persian-vue-datepicker.css";
 
 
 
export default {
 
data(){
 
    return {
 
        date:  ''
 
    }
 
},
 
components: {
 
    Picker: Picker
 
}
 
}
 
</script>
 

Keyboard Options ⌨️

you can control selected date by your keyboard the keys are :

key	function
arrow-up	move hover up
arrow-down	move hover down
arrow-left	move hover left
arrow-right	move hover right
w	plus year
s	minus year
a	plus month
d	minus month
space	select date

Props ➕

you can pass Your data to input whit these props:(none of them are required)

name	functionality
inputPlaceholder	set placeholder for input
inputDefault	selected date by default in format yyyy/mm/dd (pass now to select today)
inputStyle	style the input Described below

Style It 🖌

Pass like props:

you can style component by passing below props to it

Style elements

Prop name	Element
inputStyle	Main input

Example

<Picker v-model="date" inputStyle="background:red;border:10px solid black;" />

With CSS:

in this mode you can call below css classes to change the style of items:

class name	Element
spvd-input	input
spvd-label	input

License 📰

This project is licensed under the MIT License