Vue JS组件使用daterangepicker报错：TypeError: moment is not a function

问题原因 #

daterangepicker是基于jQuery的插件，且依赖全局作用域下的moment实例。你的代码仅局部导入了moment，未将其暴露到全局，同时缺少jQuery的正确引入，导致插件无法找到所需依赖。

解决步骤 #

1. 安装必要依赖
   确保项目已安装moment、daterangepicker和jQuery：

   npm install moment daterangepicker jquery
   

2. 修改组件代码，全局挂载依赖
   将jQuery和moment挂载到全局作用域，让daterangepicker可以访问到：

   <template>
     <input type="text" class="form-control custom-daterangepicker">
   </template>
   
   <script setup>
   import $ from 'jquery';
   import moment from 'moment';
   import { onMounted } from 'vue';
   import 'daterangepicker/daterangepicker.css';
   import 'daterangepicker/daterangepicker';
   
   // 全局挂载jQuery和moment
   window.$ = $;
   window.moment = moment;
   
   onMounted(() => {
     $('.custom-daterangepicker').daterangepicker();
   });
   </script>
   

3. （可选）使用Vue的ref替代jQuery选择器
   更符合Vue的DOM操作规范，避免全局选择器的潜在问题：

   <template>
     <input ref="datePicker" type="text" class="form-control">
   </template>
   
   <script setup>
   import $ from 'jquery';
   import moment from 'moment';
   import { onMounted, ref } from 'vue';
   import 'daterangepicker/daterangepicker.css';
   import 'daterangepicker/daterangepicker';
   
   window.$ = $;
   window.moment = moment;
   
   const datePicker = ref(null);
   
   onMounted(() => {
     $(datePicker.value).daterangepicker();
   });
   </script>
   

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