title: datepicker' does not exist on type 'JQuery
body: <p>I am trying to implement inline editing on date field column of ag-grid. I am referring to the following documentation of ag-grid and have managed include the datepicker in the grid however i am getting a compile time error in my application datepicker' does not exist on type 'JQuery. 
  I am using ag-grid community edition and Angular 7 application. </p>
  
  <p>Here is the stackblit</p>
  
  <p><a href="https://stackblitz.com/edit/angular-cjvfx2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cjvfx2</a></p>
  
  <p>I have installed the following</p>
  
  <pre><code>npm install Jquery
  npm install --save @types/jquery
  </code></pre>
  
  <p>Have added the following entry to the angular.json</p>
  
  <pre><code> "scripts": [ "./node_modules/jquery/dist/jquery.js"]
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '@angular/core'
  import { OnInit } from '@angular/core'
  import { Comparator } from '../utilities/comparator';
  import { GridOptions, GridApi } from 'ag-grid-community';
  import { DocumentUploadService } from '../services/documentUpload.service';
  import { NotifyService } from '../utilities/notify.service';
  import { number } from '@amcharts/amcharts4/core';
  import * as jquery from 'jquery';
  
  
  function getDatePicker() {
      function Datepicker() {}
      Datepicker.prototype.init = function(params) {
        this.eInput = document.createElement("input");
        this.eInput.value = params.value;
        $(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
      };
      Datepicker.prototype.getGui = function() {
        return this.eInput;
      };
      Datepicker.prototype.afterGuiAttached = function() {
        this.eInput.focus();
        this.eInput.select();
      };
      Datepicker.prototype.getValue = function() {
        return this.eInput.value;
      };
      Datepicker.prototype.destroy = function() {};
      Datepicker.prototype.isPopup = function() {
        return false;
      };
      return Datepicker;
    }
  
  
  
  
  @Component({
      selector: 'mgr-document-upload',
      templateUrl: './documentUpload.component.html'
  })
  
  
  
  export class DocumentUploadComponent implements OnInit {
      Files: Array&lt;File&gt;;
      ColumnDefs: Array&lt;any&gt; = new Array&lt;any&gt;();
      private Comparator: Comparator;
      private Error: string;
      private gridApi: GridApi;
      public GridOptions: GridOptions;
      private editClicked;
      private editingRowIndex;
      private editType;
      private components;
      ngZone: any;
      windowHeight: any;
      offset: number;
      Loading: boolean;
      public DocumentUploadDetails: any;
      public params: any;
      @Input() ManagerStrategyId = 5508;
      MgrStrategyId = 5508;
  
  
      ngOnInit() {
          this.setGridOptions();
          this.getDocumentUploadDetails();
      }
  
  
      constructor(private comparator: Comparator, private documentUploadService : DocumentUploadService,  private notify: NotifyService,) {
          this.Comparator = comparator;
          this.editClicked = true;
          this.getDocumentUploadDetails();
          window.onresize = (e) =&gt; {
              this.ngZone.run(() =&gt; {
                  this.windowHeight = window.innerHeight - this.offset;
                  setTimeout(() =&gt; {
                      if (!this.GridOptions || !this.GridOptions.api) {
                          return;
                      }
                  }, 500, true);
              });
          };
  
      }
  
  
      private getColumns(): Array&lt;any&gt; {
          const self = this;
          const columnDefs = new Array&lt;any&gt;();
          columnDefs.push({ headerName: 'ID', field: 'DocumentId', hide: true ,editable: false});
          columnDefs.push({ headerName: 'Document Type ID', field: 'DocumentTypeId', hide: true , editable: false});
          columnDefs.push({ headerName: 'Type', field: 'DocumentTypeName', hide: false , editable: true ,  cellEditor: 'agSelectCellEditor',
          cellEditorParams: {
            values: this.DocumentUploadDetails.DocumentTypes,
            cellRenderer: (params) =&gt; params.value.Name
          }
      });
          columnDefs.push({ headerName: 'Document', field: 'DocumentName', hide: false, editable: true });
          columnDefs.push({ headerName: 'Document Date', field: 'DocumentDate', hide: false , editable: true,   cellEditor: 'datePicker'});
  
          columnDefs.push(
              {
                  cellRenderer: function (p) {
  
                      if (p.node.data &amp;&amp; p.node.data.DocumentId) {
                          var eSpan = self.getDeleteSpan();
                          eSpan.addEventListener('click', function () {
                              var self2 = self;
                              //self2.onEdit();
                          });
                          return eSpan;
                      }
                      else {
                          return '';
                      }
                  }, comparator: this.comparator.StringComparator, width: 50, cellStyle: { textAlign: 'center' }, cellClass: 'align-center', headerName: "Edit", pinned: 'right'
  
              });
  
  
          columnDefs.push(
              {
                  cellRenderer: function (p) {
  
                      if (p.node.data &amp;&amp; p.node.data.DocumentId) {
                          var eSpan = self.getDeleteSpan();
                          eSpan.addEventListener('click', function () {
                              var self2 = self;
                              self2.Delete(p.node.data.DocumentId);
                          });
                          return eSpan;
                      }
                      else {
                          return '';
                      }
                  }, comparator: this.comparator.StringComparator, width: 50, cellStyle: { textAlign: 'center' }, cellClass: 'align-center', headerName: "Delete", pinned: 'right'
  
              });
  
              this.components = { datePicker: getDatePicker() };
              this.editType = 'fullRow';
  
          return columnDefs;
      }
  
  
  
      onEdit() {
          // this.params =  this.GridOptions.api.getEditingCells;
          // this.editClicked = !this.editClicked;
          // this.params.api.setFocusedCell(this.params.node.rowIndex, 'action');
          // this.params.api.startEditingCell({
          //  rowIndex: this.params.node.rowIndex,
          //  colKey: 'action'
          // });
         }
  
  
      private getDeleteSpan() {
          var eSpan = document.createElement('a');
          eSpan.innerHTML = '&lt;div style="cursor:pointer;max-width: 50px"&gt;&lt;i class="far fa-trash-alt fontColor" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;';
          return eSpan;
      }
  
  
  
      GridHeight() {
          if (!this.windowHeight) {
              this.windowHeight = window.innerHeight - this.offset + 10;
          }
          return this.windowHeight;
      }
  
      private initGrid() {
          const self = this;
      }
  
      setGridOptions() {
          this.GridOptions = {
              columnDefs: this.getColumns(),
              enableFilter: true,
              enableColResize: true,
              animateRows: true,
              enableSorting: true,
  
              onGridReady: e =&gt; {
                  if (!e || !e.api) {
                      return;
                  }
  
                  this.gridApi = e.api;
  
                  this.setDefaultSortOrder();
              },
              onGridSizeChanged: () =&gt; this.GridOptions.api.sizeColumnsToFit(),
  
  
  
          };
  
      }
  
      onCellClicked($event){
          // check whether the current row is already opened in edit or not
          if(this.editingRowIndex != $event.rowIndex) {
            console.log($event);
            $event.api.startEditingCell({
              rowIndex: $event.rowIndex,
              colKey: $event.column.colId
            });
            this.editingRowIndex = $event.rowIndex;
          }
        }
  
      setDefaultSortOrder() {
          const defaultSortModel = [
              { colId: 'DocumentDate', sort: 'desc' }
  
          ];
          this.GridOptions.api.setSortModel(defaultSortModel);
      }
  
  
      onGridSizeChanged(params) {
          const gridWidth = document.getElementById('grid-wrapper').offsetWidth;
          const columnsToShow = [];
          const columnsToHide = [];
          let totalColsWidth = 0;
          const allColumns = params.columnApi.getAllColumns();
          for (let i = 0; i &lt; allColumns.length; i++) {
              const column = allColumns[i];
              totalColsWidth += column.getMinWidth();
              if (totalColsWidth &gt; gridWidth) {
                  columnsToHide.push(column.colId);
              } else {
                  columnsToShow.push(column.colId);
              }
          }
          params.columnApi.setColumnsVisible(columnsToShow, true);
          params.columnApi.setColumnsVisible(columnsToHide, false);
          params.api.sizeColumnsToFit();
      }
  
      private Delete(Id: number) {
  
              if (Id !== 0) {
  
  
                  this.Error = '';
                  this.documentUploadService
                      .deleteDocument(Id)
                      .then((result) =&gt; {
                          if (result) {
                              this.notify.success('Document Successfully Deleted');
                             // this.ClassficationOverrideDetailsEvent.next('init');
                          }
                      }).catch(err =&gt; {
                          this.notify.error('An Error Has Occured While Deleting Document');
                      });
              }
  
      }
  
  
  
  
  
      public getDocumentUploadDetails() {
          if (this.MgrStrategyId != null) {
              this.Loading = true;
              this.initGrid();
  
              //  this.spinner.show();
              this.documentUploadService.getDocumentUploadDetails(this.MgrStrategyId)
                  .subscribe(data =&gt; {
                      this.DocumentUploadDetails = data;
                      this.ColumnDefs = this.getColumns();
                      this.Loading = false;
  
                      setTimeout(() =&gt; {
                          this.GridOptions.api.sizeColumnsToFit();
                          this.Loading = false;
                      }, 100, true);
                  },
                      err =&gt; {
                          this.Error = 'An error has occurred. Please contact BSG';
                      },
                      () =&gt; {
                      });
          }
      }
  }
  </code></pre>
  
  <p>Html </p>
  
  <pre><code>&lt;div class="card" *ngIf="DocumentUploadDetails &amp;&amp; DocumentUploadDetails.DocumentEntities" style="margin-top: 10px" &gt;
      &lt;div class="card-body" style="width:100%; text-align: left;"&gt;
          &lt;div style="overflow-x: hidden; overflow-y: hidden; "&gt;
              &lt;div class="form-group row"&gt;
                  &lt;div class="panel panel-default col-md-12  "&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                              style="float: left;"&gt;
                              &lt;ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                  style="width: 100%; height: 100%" [columnDefs]="ColumnDefs" rowHeight="30"
                                  [rowData]="DocumentUploadDetails.DocumentEntities"
                                  [editType]="editType"
                                  (cellClicked)="onCellClicked($event)"
                                  headerHeight="30" rowSelection="single"&gt;
                              &lt;/ag-grid-angular&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>