jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker 不是函数

Posted 2023-03-28

【中文标题】jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker 不是函数

【英文标题】：jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function

【发布时间】：2020-10-07 16:00:37

【问题描述】：

我正在使用 Angular 6。 我已经提到了所有相关的问题，但没有一个能解决我的问题，因此我提出了这个问题。

我按照“https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0”提供的步骤将 datePicker 添加到我的 ag-grid cellEditor。

首先它给了我一个错误，说“$ 未定义”，通过安装 jquery 和相关库并添加“import * as $ from 'jquery';”解决了这个问题。到我的组件 ts 文件中。

现在，当 ag-grid 加载时，如果我单击日期选择器单元格进行编辑，我会收到以下错误

core.js:1673 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function
    at Datepicker.init (dashboard.component.ts:875)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.initComponent (ag-grid-community.cjs.js:14369)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.createAndInitUserComponent (ag-grid-community.cjs.js:14123)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.UserComponentFactory.newCellEditor (ag-grid-community.cjs.js:14057)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.createCellEditor (ag-grid-community.cjs.js:19053)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.startEditingIfEnabled (ag-grid-community.cjs.js:19042)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.startRowOrCellEdit (ag-grid-community.cjs.js:19019)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.onCellDoubleClicked (ag-grid-community.cjs.js:19010)
    at CellComp.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.onMouseEvent (ag-grid-community.cjs.js:18947)
    at GridPanel.push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.GridPanel.processMouseEvent (ag-grid-community.cjs.js:27411)

【问题讨论】：

你成功了吗？我也面临同样的问题。但目前我们使用的是 Angular 10

【参考方案1】：

我有同样的问题。我知道这是一个老问题。但它可能对其他人有所帮助。

最近我们从 AG9 升级到 AG10。但这与这个问题无关（仅供参考）。即使在安装了“@types/jquery”之后，我也通过手动将“jquery”和“jquery-ui”文件放在 assets 文件夹中解决了这个问题。

我遵循的程序是：

第一步：

npm install --save @types/jquery

第二步：

将 jquery 添加到 tsconfig.app.json 中的类型

"types": [
  "jquery"
]

第三步：

将 jquery、jquery-ui 文件夹添加到资产/脚本或您喜欢的任何文件夹

第四步：

在 angular.json 中添加 Jquery 引用 例如：

"styles": [
          "src/assets/scripts/jquery-ui/jquery-ui.css",
          .....,
          .....,
        ],
"scripts": [
          "src/assets/scripts/jquery/jquery-3.2.1.min.js",
          "src/assets/scripts/jquery-ui/jquery-ui.js"
        ],

第五步：

这是最重要的方面。重新启动 IDE/编辑器。我有 VS Code，我必须重新启动它才能工作。

通过这种方法，您可以使日期选择器工作。

注意：我在 Ag Grid 中使用了日期选择器。为此，我必须遵循这个程序。