I've been utilizing the @vuepic/vue3datepicker component, which automatically shows the days of the current month when integrated in my project:
<template>
<VueDatePicker v-model="date" inline></VueDatePicker>
</template>
https://i.sstatic.net/hk4jl.png
However, I need to fetch the month and year from an API and display the corresponding month-year combination to the user, rather than showing the current month's days.
This objective can be easily accomplished by:
onMounted(() => {
date.value = new Date(props.year, Number(props.month)-1, 1)
})
The challenge arises when I also require using the highlight prop (as I have a list of specific days within the selected month/year that need highlighting), necessitating the date attribute in v-model="date" to be an array:
<template>
<VueDatePicker v-model="date" :highlight="highlightedDates" />
</template>
Hence, I am unsure about how to address this issue.
If you have any suggestions on how to tackle this, please share them with me.