Popup Cell Editor + ag-custom-component-popup

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = '/';</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }

        .popup {
            background: pink;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 64px;
            right: 140px;
        }

        .eDiv {
            background: green;
            height: 70px
        }
    </style>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.js?"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@23.0.2/dist/ag-grid-enterprise.min.js"></script>
    </head>

<body>
    <div id="myGrid" class="ag-theme-alpine" style="height: 100%;"></div>

   
    <script src="main.js"></script>

</body>
</html>

var gridOptions = {
  columnDefs: [

    { field: 'cellEditor', maxWidth: 90, cellEditor: "agLargeTextCellEditor"},
    { field: 'ECD', maxWidth: 90, cellEditor: "datePicker"},


  ],
  rowData: [
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"},
    {cellEditor: 'cell',ECD:"12/3/2020"}

  ],
  defaultColDef: {
    editable: true
  },
    components: {
          datePicker: getDatePicker(),
        },
  stopEditingWhenGridLosesFocus: true
};

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",
      onSelect: function(dateText, inst) {
          params.stopEditing();
      }      
    });
  };
  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 true;
  };
  return Datepicker;
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  // do http request to get our sample data - not using any framework to keep the example self contained.
  // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
  
});