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

vue

<template>
    <VueDatePicker :model-value="date" @update:model-value="handleDate" />
</template>

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

const date = ref();

const handleDate = (modelData) => {
  date.value = modelData;
  // do something else with the data
}
</script>

<template>
    <VueDatePicker :model-value="date" @update:model-value="handleDate" />
</template>

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

const date = ref();

const handleDate = (modelData) => {
  date.value = modelData;
  // do something else with the data
}
</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>
    <VueDatePicker v-model="date" textInput @text-submit="alertDate" />
</template>

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

const date = ref();

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

<template>
    <VueDatePicker v-model="date" textInput @text-submit="alertDate" />
</template>

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

const date = ref();

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

@open

Emitted when the datepicker menu is opened

Code Example

vue

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

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

const date = ref();

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

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

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

const date = ref();

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

@closed

Emitted when the datepicker menu is closed

Code Example

vue

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

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

const date = ref();

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

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

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

const date = ref();

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

@cleared

Emitted when the value is cleared on clear button

Code Example

vue

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

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

const date = ref();

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

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

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

const date = ref();

const alertFn = () => {
  alert('Value cleared');
}
</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>
    <VueDatePicker v-model="date" @focus="alertFn" />
</template>

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

const date = ref();

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

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

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

const date = ref();

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

@blur

Emitted when the input is blurred

Code Example

vue

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

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

const date = ref();

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

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

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

const date = ref();

const alertFn = () => {
  alert('Input unfocused');
}
</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 internal model-value

Code Example

vue

<template>
    <VueDatePicker v-model="date" @internal-model-change="handleInternal" />
</template>

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

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}`);
}
</script>

<template>
    <VueDatePicker v-model="date" @internal-model-change="handleInternal" />
</template>

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

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}`);
}
</script>

@recalculate-position

Emitted when the menu position is recalculated

Code Example

vue

<template>
    <VueDatePicker v-model="date" @recalculate-position="alertFn" />
</template>

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

const date = ref();

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

<template>
    <VueDatePicker v-model="date" @recalculate-position="alertFn" />
</template>

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

const date = ref();

const alertFn = () => {
  alert('Position recalculated');
}
</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>
    <VueDatePicker v-model="date" :flow="flow" @flow-step="handleFlowStep" />
</template>

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

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');
  }
}
</script>

<template>
    <VueDatePicker v-model="date" :flow="flow" @flow-step="handleFlowStep" />
</template>

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

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');
  }
}
</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 containing instance (in case of multiple calendars), month and year values.

Code Example

vue

<template>
    <VueDatePicker v-model="date" @update-month-year="handleMonthYear" />
</template>

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

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');
  }
}
</script>

<template>
    <VueDatePicker v-model="date" @update-month-year="handleMonthYear" />
</template>

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

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');
  }
}
</script>

@invalid-select

Emitted when the selected value is not valid

Will have one param

Date | Date[]: The received parameter is an internal model-value

Code Example

vue

<template>
    <VueDatePicker v-model="date" @invalid-select="handleInvalidSelect" />
</template>

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

const date = ref();

const handleInvalidSelect = (date) => {
  alert('The date is not available for select');
}
</script>

<template>
    <VueDatePicker v-model="date" @invalid-select="handleInvalidSelect" />
</template>

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

const date = ref();

const handleInvalidSelect = (date) => {
  alert('The date is not available for select');
}
</script>

@invalid-fixed-range

Emitted when the clicked day in the range mode with fixed-start or fixed-endis not a valid date for selection

Will have one param

Date: Clicked date

Code Example

vue

<template>
    <VueDatePicker v-model="date" range fixed-start @invalid-fixed-range="handleInvalidSelect" />
</template>

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

const date = ref([new Date(), new Date()]);

const handleInvalidSelect = (date) => {
  alert('The date is not available for select');
}
</script>

<template>
    <VueDatePicker v-model="date" range fixed-start @invalid-fixed-range="handleInvalidSelect" />
</template>

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

const date = ref([new Date(), new Date()]);

const handleInvalidSelect = (date) => {
  alert('The date is not available for select');
}
</script>

Emitted when marker tooltip is opened

Will have one param

marker: Provided marker object for a given date

Code Example

vue

<template>
    <VueDatePicker v-model="date" :markers="markers" @tooltip-open="onOpen" />
</template>

<script setup>
import { ref } from 'vue';
import { addDays } from 'date-fns';

const date = ref();

const onOpen = ({ date }) => {
  alert(`This date has a tooltip ${date}`);
}

const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

<template>
    <VueDatePicker v-model="date" :markers="markers" @tooltip-open="onOpen" />
</template>

<script setup>
import { ref } from 'vue';
import { addDays } from 'date-fns';

const date = ref();

const onOpen = ({ date }) => {
  alert(`This date has a tooltip ${date}`);
}

const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

Emitted when the marker tooltip is closed

Will have one param

marker: Provided marker object for a given date

Code Example

vue

<template>
    <VueDatePicker v-model="date" :markers="markers" @tooltip-close="onClose" />
</template>

<script setup>
import { ref } from 'vue';
import { addDays } from 'date-fns';

const date = ref();

const onClose = ({ date }) => {
  alert(`Tooltip on ${date} closed`);
}

const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

<template>
    <VueDatePicker v-model="date" :markers="markers" @tooltip-close="onClose" />
</template>

<script setup>
import { ref } from 'vue';
import { addDays } from 'date-fns';

const date = ref();

const onClose = ({ date }) => {
  alert(`Tooltip on ${date} closed`);
}

const markers = ref([
  {
    date: addDays(new Date(), 1),
    type: 'dot',
    tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
  },
  {
    date: addDays(new Date(), 2),
    type: 'line',
    tooltip: [
      { text: 'First tooltip', color: 'blue' },
      { text: 'Second tooltip', color: 'yellow' },
    ],
  },
  {
    date: addDays(new Date(), 3),
    type: 'dot',
    color: 'yellow',
  },
])
</script>

@time-picker-open

Emitted when the time-picker overlay is opened

Code Example

vue

<template>
    <VueDatePicker v-model="date"  @time-picker-open="onTimePickerOpen" />
</template>

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

const date = ref(new Date());

const onTimePickerOpen = () => {
  alert('The time picker is now open');
}
</script>

<template>
    <VueDatePicker v-model="date"  @time-picker-open="onTimePickerOpen" />
</template>

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

const date = ref(new Date());

const onTimePickerOpen = () => {
  alert('The time picker is now open');
}
</script>

@time-picker-close

Emitted when the time-picker overlay is closed

Code Example

vue

<template>
    <VueDatePicker v-model="date"  @time-picker-close="onTimePickerClose" />
</template>

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

const date = ref(new Date());

const onTimePickerClose = () => {
  alert('The time picker is now closed');
}
</script>

<template>
    <VueDatePicker v-model="date"  @time-picker-close="onTimePickerClose" />
</template>

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

const date = ref(new Date());

const onTimePickerClose = () => {
  alert('The time picker is now closed');
}
</script>

@am-pm-change

Emitted when the am / pm button is clicked in time picker

Will have one param

'AM' | 'PM': Currently active value

Code Example

vue

<template>
    <VueDatePicker v-model="date" :is-24="false"  @am-pm-change="onAmPmChange" />
</template>

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

const date = ref(new Date());

const onAmPmChange = (value) => {
  alert(`The time picker is set on ${value}`);
}
</script>

<template>
    <VueDatePicker v-model="date" :is-24="false"  @am-pm-change="onAmPmChange" />
</template>

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

const date = ref(new Date());

const onAmPmChange = (value) => {
  alert(`The time picker is set on ${value}`);
}
</script>

@range-start

Emitted when the first date is selected in range mode

Will have one param

Date: Selected date value

Code Example

vue

<template>
    <VueDatePicker v-model="date" range @range-start="onRangeStart" />
</template>

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

const date = ref();

const onRangeStart = (value) => {
  alert(`Selected date in range is: ${value}`);
}
</script>

<template>
    <VueDatePicker v-model="date" range @range-start="onRangeStart" />
</template>

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

const date = ref();

const onRangeStart = (value) => {
  alert(`Selected date in range is: ${value}`);
}
</script>

@range-end

Emitted when the second date is selected in range mode

Will have one param

Date: Selected date value

Code Example

vue

<template>
    <VueDatePicker v-model="date" range @range-end="onRangeEnd" />
</template>

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

const date = ref();

const onRangeEnd = (value) => {
  alert(`Range selected with the second date: ${value}`);
}
</script>

<template>
    <VueDatePicker v-model="date" range @range-end="onRangeEnd" />
</template>

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

const date = ref();

const onRangeEnd = (value) => {
  alert(`Range selected with the second date: ${value}`);
}
</script>

@update:model-timezone-value

Emits a date or date range value in a given timezone

Emitted when @update:model-value is emitted if the emit-timezone prop is provided

Will have one param

Date | Date[]: v-model value in a given timezone

Code Example

vue

<template>
    <VueDatePicker 
        v-model="date"
        emit-timezone="UTC"
        @update:model-timezone-value="setUTCDate" />
</template>

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

const date = ref();
const utcDate = ref();

const setUTCDate = (value) => {
 utcDate.value = value;
}
</script>

<template>
    <VueDatePicker 
        v-model="date"
        emit-timezone="UTC"
        @update:model-timezone-value="setUTCDate" />
</template>

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

const date = ref();
const utcDate = ref();

const setUTCDate = (value) => {
 utcDate.value = value;
}
</script>

@date-update

Emits a date value when date is clicked on the calendar

Info

This event is emitted on single date picker and week-picker

Will have one param

Date: Date clicked

Code Example

vue


<template>
  <VueDatePicker
      v-model="date"
      @date-update="dateClicked"/>
</template>

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

  const date = ref();

  const dateClicked = (date) => {
    console.log(`Selected ${date}`);
  }
</script>


<template>
  <VueDatePicker
      v-model="date"
      @date-update="dateClicked"/>
</template>

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

  const date = ref();

  const dateClicked = (date) => {
    console.log(`Selected ${date}`);
  }
</script>

Events ​

@update:model-value ​

@text-submit ​

@open ​

@closed ​

@cleared ​

@focus ​

@blur ​

@internal-model-change ​

@recalculate-position ​

@flow-step ​

@update-month-year ​

@invalid-select ​

@invalid-fixed-range ​

@tooltip-open ​

@tooltip-close ​

@time-picker-open ​

@time-picker-close ​

@am-pm-change ​

@range-start ​

@range-end ​

@update:model-timezone-value ​

@date-update ​

Events

@update:model-value

@text-submit

@open

@closed

@cleared

@focus

@blur

@internal-model-change

@recalculate-position

@flow-step

@update-month-year

@invalid-select

@invalid-fixed-range

@tooltip-open

@tooltip-close

@time-picker-open

@time-picker-close

@am-pm-change

@range-start

@range-end

@update:model-timezone-value

@date-update