Date picker with agGrid

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
    <link href="style.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="script.js"></script>
</head>
<body>
    <div style="height: 100%;width:100%">
        <h4>agGrid with Date picker</h4>
        <div id="myGrid" style="height: 100%;" class="ag-fresh"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/12.0.2/ag-grid.js"></script>

</body>

</html>

// Code goes here


//Date Editor
function DateEditor () {}

// gets called once before the renderer is used
DateEditor.prototype.init = function(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;

    // https://jqueryui.com/datepicker/
    $(this.eInput).datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true
    });
};

// gets called once when grid ready to insert the element
DateEditor.prototype.getGui = function() {
    return this.eInput;
};

// focus and select can be done after the gui is attached
DateEditor.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
};

// returns the new value after editing
DateEditor.prototype.getValue = function() {
    return this.eInput.value;
};

// any cleanup we need to be done here
DateEditor.prototype.destroy = function() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
};

// if true, then this editor will appear in a popup
DateEditor.prototype.isPopup = function() {
    // and we could leave this method out also, false is the default
    return false;
};

var columnDefs = [{
  headerName: "City",
  field: "city",
  editable: true
}, {
  headerName: "Country",
  editable: true,
  field: "country"
},{
  headerName: "Date",
  editable: true,
  field: "date",
  cellRenderer: function(params) {
      return  '<i class="fa fa-calendar-o" aria-hidden="true"></i>'+params.value;
  },
 
  cellEditor: DateEditor
}];

var rowData = [{
  city: "New York",
  country: "USA",
  date:""
}, {
  city: "London",
  country: "USA",
  date:""
},{
  city: "London",
  country: "USA",
  date:""
}]

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  enableSorting: true,
  enableFiter: true
};

document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  window.gridOptions;
});

/* Styles go here */

    height: 100%;
}

.ag-cell {
    overflow: visible;
}