How to display datepicker in headerCellTemplate to filter the date

2,155 views
Skip to first unread message

mportugal

unread,
Aug 14, 2016, 8:08:38 PM8/14/16
to UI-Grid Support
Hi
I inserted a custom filter in the grid to filter the grid data. In that in one column i need to filter the date so i want to insert the date-picker to filter the date column i inserted headerCellTemplate but date-picker is not displaying please guide me in a right way to achieve this.
Thanks in Advance.


mportugal

unread,
Aug 14, 2016, 8:10:56 PM8/14/16
to UI-Grid Support
name: 'Date',
        type: 'date',
        cellFilter: 'date:"MM/dd/yyyy"',
        filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="date" ng-model="colFilter.term" style="font-size:12px"/></div>',
        filters:
        {
        filterName: "greaterThan",
        condition: uiGridConstants.filter.GREATER_THAN,
        placeholder: 'greater than'
      },
      {
        filterName: "lessThan",
        condition: uiGridConstants.filter.LESS_THAN,
        placeholder: 'less than'
      }
Make sure that date column data is Date Object and not string.
if the data is not Date object, just loop through gridoptions.data and set date = new Date();
angular.forEach($scope.gridOptions.data, function (val) {
    val.date = new Date(val.date);
});

mportugal

unread,
Aug 14, 2016, 8:12:13 PM8/14/16
to UI-Grid Support
I worked up an example plunker with ui-bootstrap datepicker that filters from and to dates, if it helps anyone.

fernandoad...@gmail.com

unread,
Aug 16, 2016, 2:35:53 PM8/16/16
to UI-Grid Support
I wrote two solutions. I am using Solution 1 for my project.

**Solution 1:** 

In this Plunkr I used DatePickerPopup from angular-bootstrap and condition functions from ui-grid.

Here it is a portion of my code:

 { 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 }


If you have any comment or improvement, please let me know.

**Solution 2:**

I did other experiment that worked, but modifying  rowSearcher.runColumnFilter function at ui-grid.js this way:

 if (filter.flags.date === true) {
     value = new Date(value);
     // If the term has a dash in it, it comes through as '\-' -- we need to take out the '\'.

      if (!(term instanceof Date))
     {
       term = new Date(term.replace(/\\/g, ''));
     }
     else
     {
       // Now you can compare the two dates as DATES only without worrying about time elements.
       value.setHours(0,0,0,0);
     }
   }


For this solution, the field should be defined this way:

 { 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: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
         placeholder: 'Greater than or equal',
         flags: { date: true }
       },
       {
         condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
         placeholder: 'Less than or equal',
          flags: { date: true }
       }
   ],
   headerCellClass: $scope.highlightFilteredHeader }

Hope it helps.

Reply all
Reply to author
Forward
0 new messages