How to customize the action buttons?

[wendyccccc]

Describe the bug I have checked the page but can't understand how to code the selectDate() part.

To Reproduce Sample code:

<template>
        <VueDatePicker v-model="date" ref="dp" range :format="format" :dark="isDark">
          <template #action-buttons>
            <v-btn class="custom-select" @click="selectDate">Select</v-btn>
          </template>
        </VueDatePicker>
</template>

<script setup>
import { ref } from "vue";
const date = ref([]);
const dp = ref();

const format = (date) => {
  const startDate = moment(date[0]).format("YYYY/MM/DD HH:MM");
  const endDate = moment(date[1]).format("YYYY/MM/DD HH:MM");

  return `${startDate}-${endDate}`;
};
const selectDate = () => {
  ref.value.selectDate(); // error
}

</script>

Expected behavior I expect that customize button can work like default button. So do the cancel button.

Screenshots

Desktop & mobile Vue3+vite+vuetify3 @vuepic/vue-datepicker": "^5.3.0",

Thanks!

[Jasenkoo]

It is wrong in the documentation, the ref value is actually dp, you should use dp.value.selectDate().

[wendyccccc]

@Jasenkoo I got it! Thanks a lot!