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>
    <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

<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

<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

<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

<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

<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

<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 two params

• Date | Date[]: Current state of the internal model-value
• Second parameter is internal model-value in v-model format

Warning

If you use the second parameter, make sure to validate values before use, as you can get Invalid Date, null or undefined values

Code Example

<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

<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

<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

<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

<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

<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>

@tooltip-open

Emitted when marker tooltip is opened

Will have one param

• marker: Provided marker object for a given date

Code Example

<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>

@tooltip-close

Emitted when the marker tooltip is closed

Will have one param

• marker: Provided marker object for a given date

Code Example

<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

Deprecation warning

This event is deprecated, please refer to overlay-toggle event

Emitted when the time-picker overlay is opened

Code Example

<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

Deprecation warning

This event is deprecated, please refer to overlay-toggle event

Emitted when the time-picker overlay is closed

Code Example

<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

<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

<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

<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 timezone emitTimezone prop is provided

Will have one param

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

Code Example

<template>
    <VueDatePicker 
        v-model="date"
        :timezone="{ emitTimezone: '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

<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>

@invalid-date

Emits an event whenever invalid date is clicked such as disabled date, out of min or max range and so on

Will have one param

• Date: Date clicked

Code Example

<template>
  <VueDatePicker
      v-model="date"
      :disabled-dates="[new Date()]"
      @invalid-date="onInvalidDateClick" />
</template>

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

  const date = ref();

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

@overlay-toggle

Emits an event whenever some overlay is opened

Will have one param

• { open: boolean; overlay: string }: Date clicked

Code Example

<template>
  <VueDatePicker
      v-model="date"
      @overlay-toggle="onOverlayToggle" />
</template>

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

  const date = ref();

  const onOverlayToggle = (overlay) => {
    console.log(`Overlay ${overlay.overlay} is ${overlay.open ? 'opened' : 'closed'}`);
  }
</script>

@text-input

Emits when text-input prop is enabled and input value is changed

Receives 2 parameters

• event: Event: Propagated event from @input event
• parsedDate: Date | null: Result of a parsed date (returns null if unable to parse)

Code Example

<template>
  <VueDatePicker
      v-model="date"
      text-input
      @text-input="onTextInput" />
</template>

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

  const date = ref();

  const onTextInput = (event, date) => {
    console.log(`Parsed date is ${date} from the given input: ${event.target.value}`);
  }
</script>