Skip to content

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
vue
<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

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;

Released under the MIT License.