Vue Persian Datepicker UDM

This is a tutorial for how to use Vue Perisan Datepiceker UDM version

by Roozbeh Hajizadeh

HTML

<link rel="stylesheet" href="https://unpkg.com/vue2-persian-datepicker/dist/vue2-persian-datepicker.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-persian-datepicker/dist/vue2-persian-datepicker.js"></script>
<div id="app">
  تاریخ انتخاب شده: {{date}} <br/>
  <pdatepicker v-model='date' v-on:selected="dateSelectedEvent"></pdatepicker>
</div>

CSS

#app{
  direction: rtl;
}

JavaScript

Vue.component('pdatepicker', PDatePicker.PDatePicker);
var testUDMApp = new Vue({
  el: '#app',
  data: {
    date : '1396/6/8'
  },
  methods: {
    dateSelected: function(value) {
      this.date = value;
    },
    dateSelectedEvent(date){
    	console.log('year', date.year);
    	console.log('month', date.month);
    	console.log('day', date.day);
    }
  }
})