Vue 3 getting selected date from datepicker - vue.js

Question

I am building a date picker using Flowbite Datepicker Plugin: https://flowbite.com/docs/plugins/datepicker/ . Here is my html code:
<form #submit.prevent="checkAvailability" method="POST" class="space-y-6">
<div class="items-center">
<label for="start" class="text-sm">Pick Up Date</label>
<div class="relative mb-4">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</div>
<input datepicker datepicker-autohide v-model="startDate" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Check Availability</button>
</div>
</form>
and here is my Vue JS Code:
<script>
export default {
data(){
return {
startDate: '',
}
},
methods:{
checkAvailability(e) {
console.log("start date", this.startDate);
}
}
}
However, when I try to print start date in the console, it is showing as empty even if I had selected the date in the date picker.
I have tried to set #change method, but it seems like the function of onChange is not being called once I set the date.
Any help is appreacited!

Answer 1

Not 100% sure - but the plugin does not update in a vue way. I guess it is because the value is set by javascript, so no change event will raise.
It looks like the "data.startDate" is not updated when you click on a date but if you type something it will be changed.
What you can do is a "workaround", make a ref in the input
<input ref="datepicker1" datepicker ...>
and and use the refs value like that
console.log(this.$refs.datepicker1.value);
Just writing because you appreciate any help