Available events

• @input event

<date-picker
  value="1396/05/02"
  format="jYYYY/jMM/jDD"
  @input="date=$event"
/>
<span>date = {{ date }}</span>

date =

• @change event

<date-picker
  v-model="date"
  format="jYYYY/jMM/jDD"
  @change="dateMoment=$event"
/>
<span>dateMoment = {{ dateMoment.format('dddd jDD jMMMM jYYYY') }}</span>
<span>date = {{ date }}</span>

import moment from 'moment-jalaali';
export default {
  data() {
    return {
      date: '1396/05/03',
      dateMoment: moment('1396/05/03', 'jYYYY/jMM/jDD'),
    }
  }
}

dateMoment = الثلاثاء 03 Amordaad 1396
date = 1396/05/03

• @open | @close events

<date-picker @open="onOpen" @close="onClose" />

export default {
  methods: {
    onOpen(picker) {
      console.log('The datepicker is open');
    },
    onClose(picker) {
      console.log('The datepicker was closed');
    }
  }
}

• @localeChange event

<date-picker @localeChange="onLocaleChange" />

export default {
  methods: {
    onLocaleChange(localeData) {
      console.log('locale-change', localeData);
    }
  }
}

• @next-month | @prev-month events

<date-picker @next-month="onNextMonth" @prev-month="onPrevMonth" />

export default {
  methods: {
    onNextMonth(date) {
      console.log('next-month', date);
    },
    onPrevMonth(date) {
      console.log('prev-month', date);
    }
  }
}

• @year-change | @month-change events

<date-picker @year-change="onYearChange" @month-change="onMonthChange" />

export default {
  methods: {
    onYearChange(year) {
      console.log('year-change', year);
    },
    onMonthChange(month) {
      console.log('month-change', month);
    }
  }
}