Events

List of available events that are emitted on some action

@update:modelValue

This event is emitted when the value is selected. This is a v-model binding event

Code Example

<template>
    <Datepicker :value="date" @update:modelValue="handleDate" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        // Make sure to check modelData type here https://vue3datepicker.com/api/props/#modelvalue
        const handleDate = (modelData) => {
          date.value = modelData;
          // do something else with the data
        }
        
        return {
          date,
          handleDate,
        }
    }
}
</script>

@textSubmit

When textInput prop is set to true and enterSubmit is set to true in textInputOptions, when enter button is pressed, this event will be emitted

Code Example

<template>
    <Datepicker v-model="date" textInput @textSubmit="alertDate" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertDate = () => {
          alert(date.value);
        }
        
        return {
          date,
          alertDate,
        }
    }
}
</script>

@open

Emitted when the datepicker menu is opened

Code Example

<template>
    <Datepicker v-model="date" @open="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Menu open');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

@closed

Emitted when the datepicker menu is closed

Code Example

<template>
    <Datepicker v-model="date" @closed="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Menu closed');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

@cleared

Emitted when the value is cleared on clear button

Code Example

<template>
    <Datepicker v-model="date" @cleared="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Value cleared');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

Info

@focus and @blur events are not native events. Those events are handled internally in the component in order to handle proper focusing

@focus

Emitted when the datepicker menu is open

Code Example

<template>
    <Datepicker v-model="date" @focus="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Input focus');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

@blur

Emitted when the datepicker menu is closed

Code Example

<template>
    <Datepicker v-model="date" @blur="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Input unfocused');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

@internalModelChange

Emitted when the internal modelValue is changed before selecting this date that will be set to v-model

Will have one param

• Date | Date[]: Current state of the internal modelValue

Code Example

<template>
    <Datepicker v-model="date" @internalModelChange="handleInternal" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
      /**
       * If you don't use `autoApply` prop
       * with this event you can always get the current selection in the component
       * 
       * Note: Value will always be date object 
       * or array of date objects if you use `multiDates` or `range`
       * unlike v-model binding
       */
        const handleInternal = (date) => {
          // Do something
          alert(`Current selection - ${date}`);
        }
        
        return {
          date,
          handleInternal,
        }
    }
}
</script>

@recalculatePosition

Emitted when the menu position is recalculated

Code Example

<template>
    <Datepicker v-model="date" @recalculatePosition="alertFn" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        const alertFn = () => {
          alert('Position recalculated');
        }
        
        return {
          date,
          alertFn,
        }
    }
}
</script>

@flowStep

Emitted when the flow step is triggered

Will have one param

• number: Executed flow step

Points to keep in mind

• Current logic will not emit an event on the first flow step
• Flow step will keep emitting even tho there are no more steps and just keep incrementing

Both of these will be handled in one of the upcoming releases

Code Example

<template>
    <Datepicker v-model="date" :flow="flow" @flowStep="handleFlowStep" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const flow = ref(['month', 'year', 'calendar']);

        const handleFlowStep = (step) => {
          // Do something
          if (step === 1) {
            alert(`Select year`);
          }
          if (step === 2) {
            alert('Select date');
          }
        }
        
        return {
          date,
          flow,
          handleFlowStep,
        }
    }
}
</script>

@updateMonthYear

Emitted when the month or year is changed

Will have one param

• { instance: number, value: number, isMonth: boolean }: The received parameter is an object containing instance (in case of multiple calendars), value is selected value, and isMonth indicating if it is month or year

Code Example

<template>
    <Datepicker v-model="date" @updateMonthYear="handleMonthYear" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();

        // For multiCalendars, instance will be the index of the calendar where the value is changed
        const handleMonthYear = ({ instance, value, isMonth }) => {
          // Do something
          if (value === 0 && isMonth) {
            alert('Selected January');
          }
        }
        
        return {
          date,
          handleMonthYear,
        }
    }
}
</script>

@focusPrev

By default, datepicker menu is positioned via teleport component to the HTML body. To support focus inside the menu, the regular focus order is altered. When the menu is closed you can continue to navigate via tabs, however, there is a limitation if you want to use shift+tab to go back in the form. This event comes in place then, so if you are using shift+tab to go back, instead of focusing upper element it will emit this event. That way you can focus element that you need

Code Example

<template>
  <form>
    <input type="text" ref="elementBefore">
    <Datepicker v-model="date" @focusPrev="elementBefore.focus()" />
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const elementBefore = ref(null);
        
        return {
          date,
          elementBefore,
        }
    }
}
</script>