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 { VueDatePicker } from "@vuepic/vue-datepicker"}
  import { ref, useTemplateRef } from 'vue';

  const date = ref();
  const dpRef = useTemplateRef<InstanceType<typeof VueDatePicker>>('datepicker');

  const yourCustomMethod = () => {
    dpRef.value?.closeMenu()
  }
</script>

selectDate

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

• Type: () => void

closeMenu

Closes the datepicker menu

• Type: () => void

openMenu

Opens the datepicker menu

• Type: () => void

clearValue

Clears the selected value

• Type: () => void

updateInternalModelValue

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

• Type: (value: Date | Date[]) => void

setMonthYear

Set calendar month and year programmatically

• Type: (value: { month?: number | string; year?: number | string; }) => void

parseModel

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

• Type: (value: ModelValue) => void

INFO

For ModelValue type, see ModelValue

switchView

Manually show overlay

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

TIP

To close overlay pass 'calendar' as parameter

INFO

• instance - instance number in case of multiple calendars, first calendar is 0

toggleMenu

Manually toggle picker menu

• Type: () => void

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

Type: (flowStep?: number) => void

TIP

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