Vue DatepickerEvents
List of available events that are emitted on some action
@update:model-value
This event is emitted when the value is selected. This is a v-model binding event
Code Example
vue
<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>
@text-submit
When text-input prop is set to true and enterSubmit is set to true in text-input-options, when enter button is pressed, this event will be emitted
Code Example
vue
<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
vue
<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
vue
<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
vue
<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 input is focused
Code Example
vue
<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 input is blurred
Code Example
vue
<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>
@internal-model-change
Emitted when the internal model-value is changed before selecting this date that will be set to v-model
Will have one param
Date | Date[]: Current state of the internalmodel-value
Code Example
vue
<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>
@recalculate-position
Emitted when the menu position is recalculated
Code Example
vue
<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>
@flow-step
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
vue
<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>
@update-month-year
Emitted when the month or year is changed
Will have one param
{ instance: number, month: number, year: number }: The received parameter is an object containinginstance(in case of multiple calendars),monthandyearvalues.
Code Example
vue
<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, month, year }) => {
// Do something
if (month === 0) {
alert('Selected January');
}
}
return {
date,
handleMonthYear,
}
}
}
</script>
@invalid-select
Emitted when the selected value is not valid
Will have one param
Date | Date[]: The received parameter is an internalmodel-value
Code Example
vue
<template>
<Datepicker v-model="date" @invalidSelect="handleInvalidSelect" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
const handleInvalidSelect = (date) => {
alert('The date is not available for select');
}
return {
date,
handleInvalidSelect,
}
}
}
</script>