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

Code Example

<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

Note

To close overlay pass 'calendar' as parameter

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

toggleMenu

Manually toggle picker menu

handleFlow

By default, flow will only trigger on initial picker menu mount. This method triggers flow again, even if the picker is in the open state

TIP

Function supports flowStep parameter to trigger flow from a given step again

• Parameter: number