Ag Grid datepicker in edit cell date column throwing following error

Question

Hi,

I am trying to edit a date cell by following this documentation ag grid official documentation. 

I did installed  "jquery": "^3.7.1" as well. I am getting below error when i run the code. 

Error: src/app/features/project-info/pages/plan-info/plan-info.component.ts:123:20 - error TS2339: Property 'datepicker' does not exist on type 'JQuery<HTMLInputElement>'.

123     $(this.eInput).datepicker({
                       ~~~~~~~~~~

Datepicker class:

class DatePicker implements ICellEditorComp {
  getValue() {
    return this.eInput.value;
  }
  isPopup?(): boolean {
    // and we could leave this method out also, false is the default
    return false;
  }
  afterGuiAttached?(): void {
    this.eInput.focus();
    this.eInput.select();
  }
  getGui(): HTMLElement {
    return this.eInput;
  }
  eInput!: HTMLInputElement;
  // gets called once before the renderer is used
  init(params: ICellEditorParams) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.classList.add('ag-input');
    this.eInput.style.height = 'var(--ag-row-height)';
    this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';
    $(this.eInput).datepicker({
      dateFormat: 'dd/mm/yy',
      onSelect: () => {
        this.eInput.focus();
      },
    });
  }}