Angular UI-grid not sorting by date

Question

I am using UI-grid, and I have a bunch of JS date objects like so:

"dob": new Date('1942-11-19')

I want to be able to filter the column by date when you click the "sort ascending/descending" buttons. As such, I have set the colDef up like so:

      {
        field: 'dob'
        , displayName: 'D.O.B.'
        , width: '130'
        , editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
        , headerCellClass: $scope.highlightFilteredHeader
        , cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)| date:\'MM-dd-yyyy\'}}</div>'
        , cellFilter: 'date'
        , type: 'date'
      },

however, the column simply does not sort correctly. I even tried to set up a function to sort it from an external button like so:

      function mostRecent(){
        console.log('clicked mostRecent');
        $scope.gridApi.grid.sortColumn(
          $scope.gridApi.grid.getColumn('dob'), uiGridConstants.DESC
        );
        $scope.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.ALL); //this line updates the rest of the columns accordingly
      };

But it also causes a mish-mush sort that is not correct. Does anyone know what the issue is? I thought it might have to do with my cellTemplate, but after removing the template, there wasn't a difference...

Tome Pejoski · Accepted Answer · 2017-01-04 09:37:45Z

4

Yes you are right, ui-grid doesn't support sorting of Date type columns.

However you can define a sortingAlgorithm in the columnDef.

Here is how your column definition should look like:

...

columnDefinition.sortingAlgorithm = function (firstDateString, secondDateString) {
  var dateFormat = 'YYYY-MM-DD';
  return function (firstDateString, secondDateString, dateFormat) {
    if (!firstDateString && !secondDateString) {
      return 0;
    }

    if (!firstDateString) {
      return 1;
    }

    if (!secondDateString) {
      return -1;
    }

    var firstDate = $window.moment(firstDateString, dateFormat);
    if (!firstDate.isValid()) {
      throw new Error('Invalid date: ', firstDateString);
    }

    var secondDate = $window.moment(secondDateString, dateFormat);
    if (!firstDate.isValid()) {
      throw new Error('Invalid date: ', secondDateString);
      }

    if (firstDate.isSame(secondDate)) {
      return 0;
    } else {
      return firstDate.isBefore(secondDate) ? -1 : 1;
    }
  };
};

...

Please note that in this example Moment.js is used. It is a very useful library so you might probably find also another place in your project where to use it.

answered Jan 4, 2017 at 9:37

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IWI Over a year ago

Thanks for the info. I tried it, it does not seem to have an effect on the sort unfortunately. I am still getting the same, unsorted results

Tome Pejoski Over a year ago

@IWI can you create Plunker or JSFiddle?

IWI Over a year ago

You were actually right. I'm a fool and just noticed that my dates were strings and not date objects....

MrYellow Nov 20 at 0:47

You've defined a factory function. Your sorting function returns a function rather than a number.

Vignesh Subramanian · Accepted Answer · 2020-01-26 07:24:58Z

You can define the Sorting Algorithm for the date fields in UI Grid like below

columnDefs: [
{
                    field: 'DateFrom', displayName: 'From',
                    sortingAlgorithm: function (aDate, bDate, rowA, rowB, direction) {
                        var a = new Date(moment(aDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
//here DD-MM-YYYY is the current format in which the dates are returned 
                        var b = new Date(moment(bDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
                        if (a < b) {
                            return -1;
                        }
                        else if (a > b) {
                            return 1;
                        }
                        else {
                            return 0;
                        }
                    }

                }
]

Noman Chali · Accepted Answer · 2017-03-16 09:56:25Z

0

$scope.gridOptions = { 
  data: 'gridData',
   columnDefs: [
    {field: 'name', displayName: 'Name'}, 
    {field:'age', 
     displayName:'Birth Date',
     sortFn: function (aDate, bDate) {
       var a=new Date(aDate);
       var b=new Date(bDate);
       if (a < b) {
         return -1;
       }
       else if (a > b) {
         return 1;
       }
       else {
         return 0;
       }
     }
       }]
};

Try this http://plnkr.co/edit/0VD3X5YvuNSWAZlig95X?p=info

reference : https://github.com/angular-ui/ui-grid/issues/222

answered Mar 16, 2017 at 9:56

Noman Chali

3303 silver badges17 bronze badges

Comments

marc_s · Accepted Answer · 2020-10-22 19:36:47Z

0

We can sort the ui-grid column containing date field in a simplest way. Make use of cellTemplate in this way:

{
  name: "Date",
  field: 'date',
  cellTemplate:'<div>{{row.entity.date | date:"dd/MM/yyyy"}}</div>' 
 },

So, you can choose any format for date, for eg. date:"dd-MM" etc.

edited Oct 22, 2020 at 19:36

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 19, 2020 at 9:39

Shubham Yadav

14 bronze badges

Collectives™ on Stack Overflow

Angular UI-grid not sorting by date

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related