Angular集成Ag-Grid时使用jQuery datepicker报错：datepicker不是函数

这个错误我之前帮人排查过好几次，核心原因很明确：你只引入了jQuery，但没有引入jQuery UI的datepicker组件——原生jQuery本身是不带datepicker()方法的，这个功能属于jQuery UI的扩展。下面给你一步步解决的方案：

1. 先确认依赖是否安装完全 #

首先要确保你同时装了jQuery和jQuery UI：

• 如果用npm/yarn：

  npm install jquery jquery-ui --save
  # 或者用yarn
  yarn add jquery jquery-ui
  

2. 正确在项目中导入依赖 #

你的报错里提到了WEBPACK_IMPORTED_MODULE，所以大概率是Webpack环境，这里分两种场景说明：

场景A：Webpack/Vite等构建工具环境 #

在项目的入口文件（比如main.js/index.js）里，需要同时导入jQuery和jQuery UI的datepicker模块，还要记得挂载全局：

import $ from 'jquery';
// 只导入datepicker核心，避免引入冗余组件
import 'jquery-ui/ui/widgets/datepicker';
// 别忘了导入样式，不然日期选择器会没样式
import 'jquery-ui/themes/base/all.css';

// 把$挂载到全局，确保Ag-Grid能访问到
window.$ = $;
window.jQuery = $;

场景B：传统CDN引入方式 #

如果是直接在HTML里引入资源，要注意顺序：先引jQuery，再引jQuery UI：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

3. 排查Webpack配置（Webpack环境专属） #

有时候Webpack的模块隔离机制会导致Ag-Grid找不到全局的$，可以在webpack.config.js里添加ProvidePlugin自动注入：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

4. 更优替代方案：抛弃jQuery UI #

现在很多前端项目都在逐步移除jQuery依赖，如果你不想引入jQuery和jQuery UI，可以改用原生日期输入框或者现代前端框架的专属日期组件。比如用原生<input type="date">改造你的Ag-Grid编辑器：

getDatePicker() {
  function Datepicker() {}
  Datepicker.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.type = 'date';
    // 把原有的dd/mm/yy格式转换为原生date支持的yyyy-MM-dd格式
    if (params.value) {
      const [day, month, year] = params.value.split('/');
      this.eInput.value = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
    }
  };
  // 原有的其他方法（比如getValue、destroy等）保持不变
  return Datepicker;
}

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