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
dpWrapMenuRef
This is not a function, but rather access to a ref on a picker menu wrapper This element holds positioning style attribute
- Type:
Ref<HTMLElement | null>
- Default:
null