Vue 3 getting selected date from datepicker-CodePudding

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" >
   <div >
      <label for="start" >Pick Up Date</label>
      <div >
         <div >
            <svg  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"  placeholder="Select date">
      </div>
   </div>

   <div>
      <button type="submit" >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!

CodePudding user response：

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