Vue3 v-calendar v-date-picker Moving to Next Month

Question

I want to generate an event when I move to the next month or to the previous month.

I'd really appreciate your help.

Is there an event that can use this function?

Here's my code.

    <v-date-picker
        v-if="reservList[0].dates.length>0"
        is-expanded
        locale="ko"
        color="indigo"
        class="date-picker"
        :model-config="{
            type: 'string',
            mask: 'YYYY-MM-DD',
        }"
        :masks="{  L: 'YYYY.MM.DD',title: 'YYYY년 MM월' }"
        mode="date"
        v-model="pickDate"
        :attributes="reservList"
        :reactive="true"
        @change:month="changeMonth"
    >

    </v-date-picker>

<script>
  export default{
    setup(){
       //none action
       function monthChange(e){
            console.log('test',e);
        }

        return{
         monthChange
        }
    }
   }
</script>

https://vcalendar.io/api/v2.0/datepicker.html

I tried the API of the site, but there was no clear result.

Answer 1

The event you are looking for is @update:from-page.

It sends a page object as parameter.

Example:

<template>
  <v-date-picker update:from-page="changeMonth">
</template>

<script setup>
function changeMonth(page) {
  console.log(`Moved to ${page.month} (${page.monthLabel}) month.`)
}
</script>