How to manually enter date in ui grid edit datepicker

Question

In the below link provided a ui grid with date picker(column date). Here we can't manually enter the date. Kindly provide a solution to enter the date manually in the datepicker

http://plnkr.co/edit/4mNr86cN6wFOLYQ02QND?p=preview

$scope.data = [];

var generateData = function() {
  for (var i = 0, i_length = 30; i < i_length; i++)   {
      $scope.data.push({
          "firstName": "Cox",
          "lastName": "Carney",
          "company": "Enormo",
          "date": '10/14/2015 02:45:33 AM'
      });
      $scope.data.push({
          "firstName": "Lorraine",
          "lastName": "Wise",
          "company": "Comveyer",
          "date": '10/15/2015 10:52:54 AM'
      });
      $scope.data.push({
          "firstName": "Nancy",
          "lastName": "Waters",
          "company": "Fuelton",
          "date": '09/09/2014 07:32:11 AM'
      });
  }
}();

$scope.gridOptions = {
    enableGridMenu: true,
    data: 'data',
    columnDefs: [
        { name: 'First Name', field: 'firstName' },
        { name: 'Last Name', field: 'lastName'},
        { name: 'Company', field: 'company' },
        { name: 'Date',
            field: 'date',
            cellFilter: 'textDate:"M/d/yyyy"',
            editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'
        }
    ],
    enableCellEditOnFocus: true
};

Answer 1

you cant, i have the same issue. either you make a special directive , or simply let this a inputBox