Vue2环境下Vuejs-Datepicker显示但无法交互的问题求助

核心问题定位 #

你的代码存在版本兼容错误、Vue API误用以及组件绑定缺失三个关键问题，导致组件无法正常交互：

1. 安装Vue2适配版本 #

@vuepic/vue-datepicker默认版本为Vue3开发，Vue2项目必须安装专门的legacy分支：

npm install @vuepic/vue-datepicker@legacy --save

2. 修正Main.js的Vue初始化逻辑 #

你误用了Vue3的Vue.createApp()API，Vue2的正确初始化方式如下：

// Main.js 正确写法
import Vue from 'vue';
import App from './App.vue'; // 你的根组件

// 可选：全局注册日期选择器（也可保持局部注册）
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
Vue.component('VueDatePicker', VueDatePicker);

new Vue({
  render: h => h(App)
}).$mount('#app'); // 挂载到根容器，而非单独的datepicker元素

若已在组件内局部引入日期选择器，可删除Main.js中全局注册的代码，仅保留Vue实例初始化部分。

3. 给组件添加双向绑定（解决日期不保存问题） #

Vue2中必须通过v-model绑定数据，才能将选中的日期同步到输入框：

<template>
  <VueDatePicker v-model="selectedDate"></VueDatePicker>
</template>

<script>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

export default {
  components: {
    VueDatePicker
  },
  data() {
    return {
      selectedDate: null // 定义绑定变量，初始值可为空或指定日期
    }
  }
}
</script>

额外排查方向 #

若上述修正后仍有问题：

• 检查是否有其他UI库的全局样式覆盖了日期选择器的点击区域
• 排查全局事件监听（如document.addEventListener('click', ...)）是否阻止了事件冒泡
• 打开Vue Devtools，查看日期选择器的value属性是否随选择变化，确认v-model绑定生效

内容的提问来源于stack exchange，提问作者fxnnxscher