Vue3使用Flowbite Datepicker无法获取选中日期值的问题

Flowbite Datepicker 为原生JS实现的第三方插件，选中日期时会直接修改DOM节点的value属性完成输入框赋值，整个操作不会触发Vue v-model 绑定依赖的input/change原生事件，Vue响应式系统无法捕获到值变更，因此会出现绑定的startDate始终为空、自定义@change回调不触发的现象。

方案1：手动初始化Datepicker实例，通过回调同步值（推荐） #

默认的HTML属性自动初始化方式无法拿到插件实例、也无法绑定插件自带的选中回调，手动初始化可控性最高，也能避免自动初始化带来的生命周期不一致问题。

1. 修改模板部分的输入框：移除datepicker、datepicker-autohide自动初始化属性，给输入框添加ref方便获取DOM节点

   <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 ref="startDateInput" 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>
   

2. 调整JS逻辑，在组件mounted生命周期手动初始化插件，通过onSelect回调同步选中值，组件销毁时记得销毁插件实例避免内存泄漏：

   <script>
   // 根据项目实际配置调整引入路径
   import Datepicker from 'flowbite-datepicker/Datepicker';
   
   export default {
       data(){
           return {
               startDate: '',
               datepickerInstance: null
           }
       },
       mounted() {
           this.datepickerInstance = new Datepicker(this.$refs.startDateInput, {
               autohide: true, // 对应原datepicker-autohide的自动收起配置
               format: 'mm/dd/yyyy', // 可根据需求自定义日期格式
               onSelect: (formattedDate) => {
                   // 选中日期时手动同步值到Vue响应式变量
                   this.startDate = formattedDate;
               }
           })
       },
       beforeUnmount() {
           if (this.datepickerInstance) {
               this.datepickerInstance.destroy();
           }
       },
       methods:{
           checkAvailability() {
               console.log("start date", this.startDate);
           }
      }
   }
   </script>
   

方案2：通过MutationObserver监听输入框值变化（适配现有自动初始化逻辑） #

如果不想改动现有自动初始化的写法，可以通过DOM监听器捕获输入框value的变化，同步到响应式变量：

1. 保留原有输入框上的datepicker、datepicker-autohide属性，同样给输入框添加ref
2. 在mounted生命周期添加属性变化监听：

   mounted() {
       const inputEl = this.$refs.startDateInput;
       // 监听输入框value属性变更
       const valueObserver = new MutationObserver(() => {
           this.startDate = inputEl.value;
       });
       valueObserver.observe(inputEl, {
           attributes: true,
           attributeFilter: ['value']
       });
       // 组件销毁时断开监听
       this.$once('hook:beforeUnmount', () => {
           valueObserver.disconnect();
       })
   }
   

注：原生change事件仅在用户手动操作输入框、输入框失焦时触发，插件直接修改DOM属性的行为不会派发该事件，因此直接绑定@change无法捕获日期选择操作。

内容的提问来源于stack exchange，提问作者Jacky.S