Angular.js ui-grid custom date filter

Question

I am using the angular grid, ui-grid, located at ui-grid.info.

I am trying to make a custom filter that will filter the grid by date using date inputs controls, one for

Answer 1

I am using angular-ui-grid 3.1.1 and angular-ui-bootstrap 1.3.2.

My solution is based on ui-grid filter help and Munna S / Bennett Adams comments. I Obtained a solution with less code.

It works with two filters, and a Custom template ('ui-grid/custom-ui-grid-filter').

  { field: 'DATE_TIME', name: 'Date Time', cellTooltip: true,
    cellFilter: 'date:\'yyyy-MM-dd\'',
    cellTemplate: 'ui-grid/date-cell',
    filterHeaderTemplate: 'ui-grid/custom-ui-grid-filter',
    width: '40%',
    filters: [
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate >= term;
            },
          placeholder: 'Greater than or equal'
        },
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate <= term;
            },
          placeholder: 'Less than or equal'
        }
    ],
    headerCellClass: $scope.highlightFilteredHeader }

Remember that in the condition function, 'term' comes from the DatePicker filter and is a Date. Also, value is an string formatted as 'yyyy-MM-dd' in my example.

Here is my Plunkr Hope it helps and if you have any improvement please let me know.