Events
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
<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
<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 input is focused
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 input is blurred
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>
@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
<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
<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
<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),month
andyear
values.
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, 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
<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>