Methods ​

List of available methods that you can call on the datepicker from the external code

Add a ref to the component, and call the method on that ref

<template>
    <VueDatePicker v-model="date" ref="datepicker" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { DatePickerInstance } from "@vuepic/vue-datepicker"

const date = ref();
const datepicker = ref<DatePickerInstance>(null);

const yourCustomMethod = () => {
  if (datepicker) {
    // Close the menu programmatically
    datepicker.value.closeMenu()
  }
}
</script>

<template>
    <VueDatePicker v-model="date" ref="datepicker" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { DatePickerInstance } from "@vuepic/vue-datepicker"

const date = ref();
const datepicker = ref<DatePickerInstance>(null);

const yourCustomMethod = () => {
  if (datepicker) {
    // Close the menu programmatically
    datepicker.value.closeMenu()
  }
}
</script>

selectDate ​

When called and there is an active selection, it will select that date.

closeMenu ​

Closes the datepicker menu

openMenu ​

Opens the datepicker menu

clearValue ​

Clears the selected value

updateInternalModelValue ​

• Parameter: Date | Date[]

Modify the internal model-value while the picker is in the open state.

setMonthYear ​

• Parameter: { month?: number | string; year?: number | string; }

Set calendar month and year programmatically

onScroll ​

Manually trigger method that is called on window scroll

parseModel ​

• Parameter (optional): ModelValue

Calls internal parseExternalModelValue that will replace or reformat text input value and internal model value

switchView ​

Manually show overlay

• Parameter 1: 'month' | 'year' | 'calendar' | 'time'
• Parameter 2 (optional): number - instance number in case of multiple calendars

Type: (view: 'month' | 'year' | 'calendar' | 'time', instance?: number) => void;