1

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!

Jacky.S
  • 364
  • 5
  • 17

1 Answers1

2

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

LinkeKlebe
  • 76
  • 2