Vue Datepicker

Appearance

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>

@tooltip-open ​

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>

@tooltip-close ​

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>

Released under the MIT License.

Copyright © 2021-present Vuepic