Jalali Date Picker Component For Vue

Install & Download:

# NPM
$ npm install vue2-persian-datepicker --save

Description:

This is a Persian/Jalali date picker component for Vue 2.

Usage:

import Vue from 'vue'
import PDatePicker from 'vue2-persian-datepicker'
Vue.component('pdatepicker', PDatePicker)
<pdatepicker v-model="date"></pdatepicker>
export default{
    data(){
        return {
            date : '1396/6/8'
        };
    }
}

Props.

'placeholder' : { default : 'یک تاریخ را انتخاب کنید', String},
'headerBackgroundColor' :{ default : '#137e95' },
'headerColor' : { default : 'white'},
'dialogColor' : { default : 'black' },
'dialogBackgroundColor' : { default : '#fafafa'},
'minimumYear' : { default : 1300, type: Number},
'maximumYear' : { default : 1450, type: Number },
'disableDatesBeforeToday' : { default : false },
'availableDates' : { default : false, type: Boolean },
'availableDateStart' : { default: '1300/01/01', String,
  validator (value){
      if(value === '') return true;
      let elements = value.split('/');
      if(elements.length !== 3) return false;
      if(parseInt(elements[0]) < 1300) return false;
      let month = parseInt(elements[1]);  
      if(month < 1 || month > 12) return false;
      let day = parseInt(elements[2]);
      if(day < 1 || day > 31) return false;
      return true;
  }
},
'availableDateEnd' : { default: '1450/12/29', String,
  validator (value){
      if(value === '') return true;
      let elements = value.split('/');
      if(elements.length !== 3) return false;
      if(parseInt(elements[0]) < 1300) return false;
      let month = parseInt(elements[1]);  
      if(month < 1 || month > 12) return false;
      let day = parseInt(elements[2]);
      if(day < 1 || day > 31) return false;
      return true;
  }
},
'value' : { default : '' },
'name' : { default : '', type: String },
'required' : { default : false, Boolean },
'id' : { default : '', String},
'inputClass': { default : '', String },
'dialogClass' :  {default : '', String },
'wrapperClass' :  {default : '', String },
'initialView' : { default: 'day', String, 
      validator (value){
          return value === 'day' || value === 'month'
      }
  },
'inlineMode' : { default : false, Boolean },
'formatDate' : { default: 'yyyy/MM/dd', String, 
      validator (value) {
          let elements = value.split("/");
          if(elements.length !== 3) return false;
          if(elements[0] !== "yyyy" && elements[0] !== "yy") return false;
          if(elements[1] !== "M" && elements[1] !== "MM" && elements[1] !== "MMM") return false;
          if(elements[2] !== "d" && elements[2] !== "dd") return false;
          return true;
      }
  },
'openTransitionAnimation' : { default: 'slide-fade' , String },
'persianDigits' : { default : true, String }