jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function

Question

I am using Angular 6. I have referred all the relevant questions for this and none of them solved my issue hence I am raising this question.

I followed the steps give at "https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0" for adding datePicker to my ag-grid cellEditor.

First it gave me an error saying "$ is not defined" which was resolved by installing jquery and relevant libraries and adding a "import * as $ from 'jquery';" to my components ts file.

now, when the ag-grid loads, if I click on the datepicker Cell to edit it I get the following error

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)

Did you manage to make it work? I'm also facing the same issue. But currently we are using Angular 10 — Kiran

Kiran Kiran · Accepted Answer · 2020-09-02T12:17:21

I had the same issue. I know it's an old issue. But it may help some others.

Recently we upgraded from AG9 to AG10. But it's nothing to do with this issue (It's FYI). I have resolved the issue by manually placing the "jquery" and "jquery-ui" files in assets folder even after installing the "@types/jquery".

The procedure I have followed is:

Step1:

npm install --save @types/jquery

Step2:

Add the jquery to types in tsconfig.app.json

"types": [
  "jquery"
]

Step3:

Add jquery, jquery-ui folders to assets/scripts or what ever folder you are comfortable with

Step4:

Add Jquery references in angular.json Ex:

"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"
        ],

Step5:

This is the most important aspect. Restart the IDE / Editor. I have VS Code, I had to restart it to work.

With this approach you can make the date picker work.

Note: I have used the date picker in Ag Grid. For that I had to follow this procedure.

jquery__WEBPACK_IMPORTED_MODULE_1__(...).datepicker is not a function

1 Answers